Search code examples
javascriptthree.jscesiumjs

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).


Solution

  • 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.