Three.js清除场景/模型释放内存

在开发3D场景时，若遇到需要动态添加删改模型、场景，页面切换重渲染时，为避免内存叠加占用，需要手动清除场景所占用的内存，避免溢出与资源浪费。

• 使用 dispose() 清除所有网格模型几何体的顶点缓冲区占用内存
• 使用 object.clear() 销毁模型对象，清除页面内存
• 暂停 requestAnimationFrame() 方法，避免无意义运行
• 清空 canvas画布，置空dom与相关元素

清除场景

 clearScene() {
    cancelAnimationFrame(this.animationId);
    this.scene.traverse((child) => {
      if (child.material) {
        child.material.dispose();
      }
      if (child.geometry) {
        child.geometry.dispose();
      }
      child = null;
    });
    this.sceneDomElement.innerHTML = '';
    this.renderer.forceContextLoss();
    this.renderer.dispose();
    this.scene.clear();
    this.flows = [];
    this.scene = null;
    this.camera = null;
    this.controls = null;
    this.renderer.domElement = null;
    this.renderer = null;
    this.sceneDomElement = null;
    console.log('clearScene');
  }

清除Group

 clearGroup(group) {
    const clearCache = (item) => {
      item.geometry.dispose();
      item.material.dispose();
    };
    const removeObj = (obj) => {
      let arr = obj.children.filter((x) =>!! x);
      arr.forEach((item) => {
        if (item.children.length) {
          removeObj(item);
        } else {
          clearCache(item);
          item.clear();
        }
      });
      obj.clear();
      arr = null;
    };
    removeObj(group);
  }

删除场景中的指定的某个模型/Group

scene.remove(group); // 删除组

group.remove(mesh);// 删除模型