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 中销毁场景和物体,从而释放内存。