Three.JS =>加载Big .Obj文件大约300 Mb将导致浏览器崩溃并需要很长时间才能加载

Question

我想加载.obj文件大小约为300Mb.当我加载该文件时它会使浏览器崩溃,有些时候加载会花费更多时间,但之后它会说内存核心被转储...

所以我在这里缺少任何其他方式来加载大对象文件和材料文件.

提前谢谢你......:slight_smile:

Answer 1

您可以做很多事情来优化文件和应用程序.

1. 尽可能减少多重计数.请记住,模型根本不应该过于详细.

2. 将Obj文件转换为Json和/或为场景中的每个对象创建单独的JSON文件.请记住,geometry是您尝试加载的文件中最重的数据块.因此,如果可能,BufferGeometry为每个文件创建单独的文件并通过它加载BufferGeometryLoader

3. 在加载所有js和json文件之前,您可以使用一些压缩/解压缩技术.查看OpenCTM压缩.您也可以尝试gzip您的文件并对其进行放气.

4. 在创建网格的3d建模阶段,合并尽可能多的几何.最简单的方法是识别具有相同/相似材料的所有网格,合并这些几何,并为这些几何分配相同的材质.您拥有的几何数量越少,渲染管道中绘制调用的次数就越少.因此,您的表现将会提高.

5. 您可以跟踪您的drawcalls使用情况renderer.info

6. 保持纹理文件大小较低的分辨率.我一般建议少于1K.

7. 材料性能成本是这样的MeshBasicMaterial< MeshLambertMaterial< MeshPhongMaterial< MeshStandardMaterial< MeshPhysicalMaterial.在将材质指定给几何体时要小心.Threejs doc清楚地说明了每种材料的所有特征.因此,如果您知道对象不需要材料的某些属性,则回退到更便宜的材质.

8. 使用normalMaps伪造的goemetries.这将减少您vertices所需的数量.

9. 如果您的场景是静态使用aoMap并且LightMap在场景中消除了对光源的需求及其计算成本.

10. 如果场景是静态的,请停止requestAnimationFrame并仅在需要时渲染.例.如果您使用的是orbitcontrol.js,请onChange在触发用户活动时使用方法进行渲染.

11. 使用Chrome扩展程序,如Threejs Inspector和WebGL Inspector进行调试.

12. 如果动态删除场景中的任何内容,请确保正确处理数据.

13. 300 MB的文件非常大.确保将其减少到30 mb或更低,理想情况下,低于10 mb以获得最佳体验.

还有很多事情可以做,如果你能够实现大部分这一点,你将从目前的问题中解脱出来,然后可以专注于提前优化.我强烈建议坚持使用Threejs文档.