threejs 模型多次加载

Question

开发过程中遇到的问题：

需求是有一个树的模型，然后点击地面，会在地面上“种下”一颗同样的树。现在是这个树的 JSON 文件存在服务器端，然后我来请求 JSON 的路径，用 JSONLoader 加载，成功后获取 geometry 和 material 构造 mesh。但是每次种树的时候都需要去请求 JSON 文件获取 geometry 和 material 这样太麻烦了，而且这个 JSON 文件还不小。想问下有没有方法可以只获取一次 geometry 和 material，然后把 geometry 和 material 存在某个地方就不用每次种树的时候重复发请求了。。

export function createTree (vector3, type, tempTreeId, modelUrl) {
  return new Promise((resolve, reject) => {
    loader.load(url(modelUrl), (geometry, materials) => resolve({ geometry, materials }), () => {}, reject)
  }).then(v => {
    const mesh = new THREE.Mesh()
    const { geometry, materials } = v
    const material = new THREE.MultiMaterial(materials)
    material.side = THREE.DoubleSide
    Object.assign(mesh, { geometry, material })
    mesh.castShadow = true
    mesh.receiveShadow = true
    // mesh.scale.set(10, 10, 10)
    mesh.position.copy(vector3)
    mesh.userData = { treeType: type, id: tempTreeId, type: 'tree'  }
    mainScene.add(mesh)
    return Promise.resolve(mesh)
  })
}

Answer 1

开始时加载一次模型，把这个模型放到视野外或visible置false，作为一个原型。每次新种树就clone一个这个原型，赋予克隆体新属性。