Three.js大模型优化分片加载

背景

​ 由于公司业务的持续发展，模型的体积从几十兆变成几百兆又逐渐增加到上G，同样，请求速度和加载速度也从几秒钟变成几分钟。作为一个急性子，加载loading页面这么久，这不能忍，这绝对不能忍。因此在做完模型缓存IndexDB之后（只可解决请求问题，不可解决加载问题），开始着手于模型的分片加载。

原理

​ 以obj+mtl来说，其实等同于将一个模型拆分成2个或者多个模型+材质。基于这个，运用到three.js官方推荐的gltf/glb模型来说也是同理

实现

• 首先将一个大的gltf/glb模型拆分成多个小模型，这一步可以让美术去拆，当然本着不愿意麻烦别人的态度，下载一个bleander自己去拆也不是不可以，因为模型较大，为了减少git仓库的代码体积，我将模型放到了obs服务器去存储。

• 将地址配置好并循环加载引用,这里地址写的是本地地址，替换成自己对应的oss或者obs地址也可以

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);
})
复制代码

• 模型拆解的时候位置不要变，这样模型就会拼在一起