CODEWITHSUNDEEP
javascriptthree.jscesiumjs
Premkumar
Premkumar

Reputation: 701

How to integrate three.js into Cesium or vice verse?

I have rendered some 3D objects (JSON and OBJ models) in the Three.js framework. Now I need to render the scene into the Cesium framework based on the Geo Coordinates.

Has anyone tried this before? It would be helpful if someone could share some articles or a sample application on this (i.e. Integrate Cesium and Three.js).

Upvotes: 2

Views: 4265

Answers (3)

emackey
emackey

Reputation: 12383

This question is fairly old now, and in that time both Cesium and Three.js have developed much stronger support for a 3D model format called glTF, which is backed by the Khronos group (the WebGL standards folks). This is now the preferred way to render your 3D models (in Cesium at least).

Cesium can't support direct integration with Three.js, in part because the two products have very different rendering engines under the hood. Three.js strives for flexibility and ease of use, while Cesium strives for accuracy on a planet-scale or larger rendering. Many of Cesium's shaders perform 64-bit math with position data (using separate 32-bit "high" and "low" attributes, for example), which is needed for millimeter-level accuracy on a 13000km-wide planet. Cesium also has a system of using multiple view frustums that allow Solar-system-sized rendering (for example, nearest near plane of 1 meter or less, farthest far plane of 1e11 km or more. This doesn't work in a single pass on a typical WebGL depth buffer, so Cesium cuts the total view volume into 3 or 4 pieces to get it done).

Generally I'm suggesting you should select the correct rendering engine for the job you're trying to do, using knowledge of the relative features and strengths of the engines available. I don't think trying to mix the two engines together is the correct answer.

Upvotes: 4

Sean Bradley
Sean Bradley

Reputation: 3577

To add your .obj to cesium, you can use blender to export your 3d model as a collada .dae file, Then use the 'collada to gltf' converter at [http://cesiumjs.org/convertmodel.html] to convert it to a .glb (gl binary)

And then in your html, you can add your object as an entity to the viewer. for example,

var building = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-1.679800, 51.997300, 180.75),
    model: {
                uri: '/models/myBuilding.glb',
                minimumPixelSize: 64
            }
        });

Upvotes: 1

Matthew Amato
Matthew Amato

Reputation: 2022

There is no single answer for what you want to do and no out of the box support in either project. In theory it should be possible to write wrappers around the various Three objects and turn them into Cesium equivalents. (For example, Three.Mesh may easily map to Cesium.Primitive.) The fact that no one has done this yet (as far as I know) makes me suspect that it's of limited usefulness. (Though I think a Three adapter would be cool anyway)

In most cases it's probably easier to just drop three.js and do everything in Cesium. For example, using Cesium's BoxGeometry instead of a Three.BoxGeometry.

Upvotes: 1

Related Questions