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

参考转载自https://juejin.cn/post/6964572136564490254

1.首先将让美术去拆一个大的gltf/glb模型拆分成多个小模型。

2.将地址配置好并循环加载引用。

注意：

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

// 分段加载

const urls = [{

  key: 'park1',

  url: 'static/model/basesplit/电风.glb'

}, {

  key: 'park2',

  url: 'static/model/basesplit/电电.glb'

}, {

  key: 'park3',

  url: 'static/model/basesplit/给排水.glb'

}, {

  key: 'park4',

  url: 'static/model/basesplit/建筑.glb'

}, {

  key: 'park5',

  url: 'static/model/basesplit/结构.glb'

}, {

  key: 'park6',

  url: 'static/model/basesplit/隆达场地.glb'

}, {

  key: 'park7',

  url: 'static/model/basesplit/消防冷却.glb'

}]

const loadModel = (data) => {

  const { url } = data;

  const gltfloader = new GLTFLoader();

  gltfloader.load(url, function (gltf) {

    model.add(gltf.scene);

    gltf.scene.position.set(-5, 0, 0);

  })

};

urls.map((d) => {

  loadModel(d)

})