在开发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);// 删除模型
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐