Threejs内存泄漏

[veciolin]

Hi，

不得不说您的整体方案非常完善，写得非常好。

我发现在Home的index.vue中，onmount会去创建对应的threejs的效果，但是在onUmounted有一些没有释放。
如果打开页面后，频繁多次切换会有内存泄漏，整个浏览器会比较卡。可以合入了类似的cleanup

const cleanup = () => {
  animationRunning.value = false;

  clearIntervalTimer();

  if (scene.value) {
    scene.value.traverse((object: THREE.Object3D) => {
      if ((object as any).material) {
        if (Array.isArray((object as any).material)) {
          (object as any).material.forEach((material: THREE.Material) => {
            material.dispose();
          });
        } else {
          (object as any).material.dispose();
        }
      }
      if ((object as any).geometry) {
        (object as any).geometry.dispose();
      }
      if ((object as any).texture) {
        (object as any).texture.dispose();
      }
    });
    scene.value.clear();
  }

  if (objects.value) {
    objects.value.forEach((object) => {
      if (object.element) {
        object.element.remove();
      }
    });
    objects.value = [];
  }

  if (controls.value) {
    controls.value.removeEventListener("change", render);
    controls.value.dispose();
  }


  scene.value = null;
  camera.value = null;
  renderer.value = null;
  controls.value = null;
};

我测试后，应该是基本没有泄漏的问题。另外我尝试了下用tauri打包了下，功能也基本没问题，有需要感觉可以也加入，当然我看您也加了Docker，也很方便。

[LOG1997]

好的，感谢，写的时候都没注意

[kentge]

function animation() { TWEEN.update(); controls.value.update(); // 设置自动旋转 // 设置相机位置 requestAnimationFrame(animation); }
我想问一下，requestAnimationFrame这个是递归调用的，如果不取消，是不是也会造成内存泄漏

[veciolin]

requestAnimationFrame

我的理解是要，这个得记录下animate_id，在退出的时候调用cancelAnimationFrame.

[kentge]

requestAnimationFrame

我的理解是要，这个得记录下animate_id，在退出的时候调用cancelAnimationFrame.

okk

[kentge]

const cleanup = () => {
animationRunning.value = false;

clearIntervalTimer();

if (scene.value) {

加了cleanup后，我发现频繁切换，dom节点还是会稳步增加，是不是还有什么地方没有处理

[LOG1997]

const cleanup = () => {
animationRunning.value = false;
clearIntervalTimer();
if (scene.value) {

加了cleanup后，我发现频繁切换，dom节点还是会稳步增加，是不是还有什么地方没有处理

是的，我还在排查。昨天加班还没时间弄