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

Question

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

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

Answer 1

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

在大多数情况下，放弃 three.js 并在 Cesium 中完成所有操作可能更容易。例如，使用 Cesium 的 BoxGeometry 而不是 Three.BoxGeometry.

Answer 2

要将 .obj 添加到 cesium，您可以使用 blender 将 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
            }
        });

Answer 3

这个问题现在已经很老了，那时 Cesium 和 Three.js 都对名为 glTF 的 3D 模型格式提供了更强大的支持，该格式得到了 Khronos 组的支持（ WebGL 标准人员）。这是现在渲染 3D 模型的首选方式（至少在 Cesium 中）。

Cesium 不支持与 Three.js 的直接集成，部分原因是这两种产品的底层渲染引擎截然不同。 Three.js 力求灵活性和易用性，而 Cesium 力求在行星规模或更大范围内渲染的准确性。 Cesium 的许多着色器使用位置数据执行 64 位数学运算（使用单独的 32 位 "high" 和 "low" 属性，for example), which is needed for millimeter-level accuracy on a 13000km-wide planet. Cesium also has a system of using multiple view frustums 允许太阳系大小的渲染（例如，最近的1 米或更小的平面，最远平面为 1e11 公里或更远。这在典型的 WebGL 深度缓冲区的单次传递中不起作用，因此 Cesium 将总视图体积切割成 3 或 4 块来完成它）。

一般来说，我建议您应该 select 正确的渲染引擎来完成您正在尝试做的工作，利用可用引擎的相关特性和优势的知识。我不认为尝试将两个引擎混合在一起是正确的答案。

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

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

javascript

three.js

cesium