javascript - 如何将 three.js 集成到 Cesium 中，反之亦然？

Question

我在 Three.js 框架中渲染了一些 3D 对象（JSON 和 OBJ 模型）。现在我需要根据地理坐标将场景渲染到 Cesium 框架中。

有没有人试过这个？如果有人可以分享一些关于此的文章或示例应用程序（即集成 Cesium 和 Three.js），将会很有帮助。

Answer 1

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.

Answer 2

对于您想要做的事情没有单一的答案，并且在任何一个项目中都没有开箱即用的支持。理论上，应该可以围绕各种 Three 对象编写包装器并将它们转换为 Cesium 等价物。（例如，Three.Mesh 可能很容易映射到 Cesium.Primitive。）目前还没有人这样做（据我所知）这一事实让我怀疑它的用处有限。（虽然我认为一个三适配器无论如何都会很酷）

在大多数情况下，只需删除三个.js 并在 Cesium 中完成所有操作可能会更容易。例如，使用 Cesium 的 BoxGeometry 而不是 Three.BoxGeometry。

Answer 3

要将 .obj 添加到 cesium，您可以使用搅拌机将 3d 模型导出为 collada .dae 文件，然后使用 [ http://cesiumjs.org/convertmodel.html]上的“collada to gltf”转换器 进行转换到 .glb（gl 二进制文件）

然后在您的 html 中，您可以将对象作为实体添加到查看器。例如，

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