THREE JS: loading large model crashes browser

Question

If I load a small PLY file (4-10 MB) using the following code:

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);
    });

Everything works fine.

If I load large files 50MB+ the Browser sometime crashes or if the model is loaded successfully the interaction with the object using the orbit-control is painfully slow in some computer.

I appreciate that 3D models are complex beasts but do you know if there are ways to optimize memory usage, model loading in THREE js without decimate the file, operation that I cannot do without losing vital information?

Answer 1

I've had a similar issue with larger models. What I suggest is that you stream and load the model in small chunks (for example 1mb at a time).
The problem is, Three.js does not support loading chunked models.
What I did for myself was to rewrite a loader to work on chunks of data and build the internal representation from chunks.

Another way would be to export the scene in smaller pieces and then recombine them after loading.

There is also the third possibility, that the model is simply very complex.

Edit: Okay, I played around a bit and if you convert the file into a binary STL, then it works a bit better and does not crash chrome, while maintaining the same vertex count. I'll include a link here to 2 converted files, where one is a decimated version (70% reduction in vertex count) and the other is a conversion of the original, both of them worked for me.