在 three.js 上渲染重型模型/网格

Question

我知道这是一个众所周知的问题，但我找不到好的答案。

我的使用情况

我使用three.js来展示通过无人机图片创建的3D模型（here an example）。

问题

我无法渲染重型模型（1M 顶点，2M 面）：Chrome 或 WebGl 崩溃。

我尝试了什么

我在所有测试中都使用了 Threejs.org 示例，以确保不是我的代码不起作用。我在带有 --max_old_space_size=6144 标志的 x64 Chrome 上进行了测试。

• 使用 ColladaLoader 在 .dae 中导入模型 --> 使用 2.5Go 的 RAM 并且 Chrome 崩溃（显示“内存不足”）
• 使用 OBJLoader + MTLLoader 在 .obj 中导入模型 --> 使用 2.8Go 的 RAM 并且 WebGl 崩溃
• 我发布了很多关于 Three.js 和内存分配的帖子，但其中很多都谈到了从场景中移除对象

可能的解决方案

• 我看到 .stl（二进制）文件更紧凑，但据我所知 这些文件没有纹理，所以我不能使用它
• 使用 BinaryLoader（具有 GeometryBuffer 输出），但我需要将 .dae 或 .obj 转换为二进制文件，但我不知道该怎么做
• 将我的模型加载到多个部分而不是一次加载？但我没有看到任何有这种待遇的例子或帖子

如何重现

对于代码，我使用 Threejs.org 上的基本示例。对于模型：

• 如果您想尝试使用 .dae，您可以在 this folder 上找到一个工作示例 (WorkingModel.dae / .jpg) 和不工作的模型 (BigModel.dae / .jpg)
• 如果您想尝试使用 .obj，您可以在 this folder 上找到一个工作示例 (WorkingModel.dae / .jpg / .mtl) 和不工作的模型 (BigModel.dae / .jpg / .mtl )

有什么想法可以加载大的吗？ 谢谢！

编辑 1：

我尝试在 SuccessCallback 中放置一个断点，以查看 RAM 的过载是在加载期间还是之后。我无法命中断点，所以 RAM 的过载在 SuccessCallback 之前。

然后我一步一步地在 ColladaLoader 中查找使用这么多 RAM 的原因。这是“调用堆栈”：

• myCollada.load()
• ColladaLoader.parse()
• Geometry.parse()
• Mesh.parse()
  • Source.parse（命中 3 次）= +400mo 内存
  • Vertices.parse = +0mo in RAM
  • Triangles.parse = +1500mo in RAM
  • this.geometry3js.computeVertexNormals() = RAM 超过 2600Mo 和 chrome 崩溃

我可以做任何其他测试来找出这个问题的原因吗？ 谢谢

Answer 1

您的纹理非常大，而且您不需要它们，因为您的模型已烘焙顶点颜色，其中包括烘焙光照。因此，您的模型也不需要 UV。

使用ColladaLoader2，和这个模式。它应该可以工作。

var loader = new THREE.ColladaLoader();

loader.load( 'BigModel.dae', function ( collada ) {

        var dae = collada.scene;

        dae.traverse( function( child ) {

            if ( child instanceof THREE.Mesh ) {

                child.geometry.removeAttribute( 'uv' ); // you don't need it

                child.material = new THREE.MeshBasicMaterial( { // scene lights not required

                    vertexColors: THREE.VertexColors // you have them, use them

                } );

                scene.add( child );
            }

        } );

} );

three.js r.86