The Three. Js large model optimizes fragment loading

background

As the company’s business continued to grow, the size of the model went from tens of megabytes to hundreds of megabytes and gradually increased to over GIGABytes. Likewise, the request speed and load speed also changed from seconds to minutes. As a hothead, loading loading pages for so long is unbearable, it is absolutely unbearable. So after the model has been cached for IndexDB (which can only solve the request problem, not the load problem), we begin to load the model in fragments.

The principle of

In terms of OBJ + MTL, it is equivalent to splitting a model into 2 or more models + materials. Based on this, the same applies to the GLTF/GLB model officially recommended by Three. js

implementation

• Firstly, I will split a large GLTF/GLB model into several smaller models, which can be dismantled by art. Of course, in the attitude of not wanting to bother others, it is not impossible to download a Bleander model and dismantle it by myself, because the model is large. In order to reduce the code volume of Git warehouse, I put the model into OBS server for storage.

• Configure the address and loop the reference, where the address is a local address, or replace it with its own corresponding OSS or OBS address

const urls = [
    {
        key:'park1'.url:'./test/pk1.glb'
    },
    {
        key:'park2'.url:'./test/pk2.glb'
    },
    {
        key:'park3'.url:'./test/pk3.glb'
    },
    {
        key:'park4'.url:'./test/pk4.glb'
    },
    {
        key:'park5'.url:'./test/pk5.glb'
    },
    {
        key:'park6'.url:'./test/pk6.glb'},]const  loadModel = (data) = > {
    const { url} = data;
    const gltfloader = new THREE.GLTFLoader();
    gltfloader.load(url, function (gltf) {
        scene.add(gltf.scene)
        gltf.scene.position.set(-5.0.0);
    });
}

urls.map((d) = > {
    loadModel(d);
})
Copy the code

• Don’t change the position when the model is taken apart, so the model will fit together