在three.js

Question

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

我的用法

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

问题

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

我尝试了什么

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

• 使用ColladaLoader导入.dae中的模型 - ＆gt; 2.5使用RAM并且Chrome崩溃（显示＆＃34;内存不足＆＃34;）
• 使用OBJLoader + MTLLoader导入.obj中的模型 - ＆gt; 2.8使用RAM并且WebGl崩溃
• 我发了很多关于Three.js和内存分配的帖子，但很多人谈到从场景中删除一个对象

可能的解决方案

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

如何重现

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

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

任何想要加载大的想法？ 谢谢！

编辑1：

我试图在SuccessCallback中放置一个断点，以查看RAM的过载是在加载期间还是之后。我无法点击断点，因此RAM的重载在SuccessCallback之前。

然后我一步一步地在ColladaLoader中找到了使用这么多RAM的内容。这是＆＃34; callstack＆＃34; ：

• myCollada.load（）
• ColladaLoader.parse（）
• Geometry.parse（）
• Mesh.parse（）
  • Source.parse（命中3次）= RAM中的+ 400mo
  • Vertices.parse = RAM中的+ 0mo
  • Triangles.parse = RAM中的+ 1500mo
  • this.geometry3js.computeVertexNormals（）= RAM超过2600Mo并且Chrome崩溃

我可以进行任何其他测试以找出此问题的原因吗？ 感谢

Answer 1

你的纹理很大，而且你不需要它们，因为你的模型已经烘焙了顶点颜色，包括烘烤的灯光。因此，您的模型不需要紫外线。

使用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