Threejs 销毁场景的方法

threejs yekong

vue3 中使用Threejs绘制地图的时候,会有下钻的需要,在实际开发中使用下钻需要重绘,如果不销毁旧场景就直接绘制会导致内存占用进而越来越卡顿,所以这里我们要先实现场景的销毁。

在 Three.js 中,当你想要销毁一个场景(scene)或者释放内存时,可以通过以下方法来实现:

删除场景中的物体:

while (scene.children.length > 0) {
  const object = scene.children[0];
  scene.remove(object);
  disposeObject(object);
}

定义一个 disposeObject 函数

定义一个 disposeObject 函数来处理物体的几何体(geometry)、材质(material)以及纹理(texture):

function disposeObject(obj) {
  if (obj.geometry) {
    obj.geometry.dispose();
  }
  if (obj.material) {
    if (Array.isArray(obj.material)) {
      obj.material.forEach((material) => {
        disposeMaterial(material);
      });
    } else {
      disposeMaterial(obj.material);
    }
  }
  if (obj.texture) {
    obj.texture.dispose();
  }
}

定义一个 disposeMaterial 函数

定义一个 disposeMaterial 函数来处理材质的纹理(texture):

function disposeMaterial(material) {
  if (material.map) {
    material.map.dispose();
  }
  if (material.lightMap) {
    material.lightMap.dispose();
  }
  if (material.bumpMap) {
    material.bumpMap.dispose();
  }
  if (material.normalMap) {
    material.normalMap.dispose();
  }
  if (material.specularMap) {
    material.specularMap.dispose();
  }
  if (material.envMap) {
    material.envMap.dispose();
  }
  if (material.alphaMap) {
    material.alphaMap.dispose();
  }
  if (material.aoMap) {
    material.aoMap.dispose();
  }
  if (material.displacementMap) {
    material.displacementMap.dispose();
  }
  if (material.emissiveMap) {
    material.emissiveMap.dispose();
  }
  if (material.gradientMap) {
    material.gradientMap.dispose();
  }
  if (material.metalnessMap) {
    material.metalnessMap.dispose();
  }
  if (material.roughnessMap) {
    material.roughnessMap.dispose();
  }
  if (material.clearcoatMap) {
    material.clearcoatMap.dispose();
  }
  if (material.clearcoatRoughnessMap) {
    material.clearcoatRoughnessMap.dispose();
  }
  if (material.clearcoatNormalMap) {
    material.clearcoatNormalMap.dispose();
  }
  material.dispose(); // 释放材质
}

释放 WebGLRenderer 占用的资源

如果你使用了 WebGLRenderer,还需要执行以下操作:

renderer.dispose(); // 释放 WebGLRenderer 占用的资源

通过以上步骤,你可以在 Three.js 中销毁场景和物体,从而释放内存。

喜欢