三个 JS：加载大型模型会使浏览器崩溃

Question

如果我使用以下代码加载一个小的 PLY 文件 (4-10 MB)：

this.loader.load('assets/data/GuyFawkesMask.ply', function (geometry) {
      var bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry );

      console.log(bufferGeometry);

      // Create object
        let object =
            new THREE.Mesh(bufferGeometry,
            new THREE.MeshPhongMaterial(
                {
                    color: 0xFFFFFF,
                    //vertexColors: THREE.VertexColors,
                    shading: THREE.FlatShading,
                    shininess: 0
                })
            );

        _this.add(object);
    });

一切正常。

如果我加载超过 50MB 的大文件，浏览器有时会崩溃，或者如果模型加载成功，使用轨道控制与对象的交互在某些计算机上会非常慢。

我明白 3D 模型是复杂的野兽，但你知道是否有方法可以优化内存使用、在三个 js 中加载模型而不破坏文件、我无法在不丢失重要信息的情况下进行的操作？

Answer 1

我在使用较大型号时遇到过类似问题。我的建议是你以小块的形式流式传输和加载模型（例如一次 1mb）。
问题是，Three.js 不支持加载分块模型。
我为自己所做的是重写加载程序以处理数据块并从数据块构建内部表示。

另一种方法是将场景分成较小的部分导出，然后在加载后重新组合它们。

还有第三种可能，就是模型太复杂了。

编辑：好的，我试了一下，如果您将文件转换为二进制 STL，那么它会工作得更好并且不会崩溃 chrome，同时保持相同的顶点数。我将在此处包含一个 link 到 2 个转换后的文件，其中一个是精简版本（顶点数减少 70%），另一个是原始版本的转换，它们都对我有用。

三个 JS：加载大型模型会使浏览器崩溃

THREE JS: loading large model crashes browser

loader

three.js

ply-file-format