Three.js复用可销毁对象的最佳实践及内存泄漏问题咨询

问题描述 #

我为了复用材质，在Angular模态对话框组件文件里全局实例化了MeshNormalMaterial并在组件中使用。但关闭再重新打开对话框时，所有组件实例都会滞留内存（只有用这个材质时才会出现）。我试着在组件销毁前调用mat.dispose()，这样垃圾回收能正常释放组件内存，但因为材质是全局的，这么处理总觉得怪异，不确定是否合理。我原本认为材质是不可变的，不会持有组件引用，垃圾回收应该能清理组件，但实际没生效，我的理解是不是错了？想了解Three.js中复用可销毁对象的最佳实践。

相关代码 #

import * as THREE from 'three';
...

export const mat = new MeshNormalMaterial(); // 全局创建用于复用

export class TestViewNative {
  private mesh?: THREE.Mesh; // 保存mesh实例引用

  async ngAfterViewInit() {
    ...
    const geo = new THREE.BoxGeometry(); // 示例几何体
    this.mesh = new THREE.Mesh(geo, mat); // 使用全局材质
    ...
  }
  
  public ngOnDestroy(): void {
    mat.dispose() // 此处处理怪异，但能避免内存泄漏
  }
}

问题分析与解决方案 #

问题根源 #

核心问题在于Three.js材质与Mesh的双向引用：当你将全局材质赋值给Mesh时，Mesh会持有材质的引用，同时材质内部的users集合会记录所有使用它的Mesh实例。Angular组件销毁时，若未解除这种引用，Mesh会因被材质的users引用而无法被垃圾回收，进而导致整个组件实例滞留内存。

你调用mat.dispose()能解决泄漏，是因为该方法会清空材质的users集合，解除对Mesh的引用——但这会销毁全局材质，完全违背了复用的初衷。

你的理解偏差 #

你认为“材质不可变就不会持有组件引用”是错误的。Three.js的材质内部维护了users数组，用于追踪所有关联的渲染对象（如Mesh），目的是在材质属性更新时，通知所有关联对象同步更新渲染状态。这个引用关系会直接阻止Mesh及关联组件被垃圾回收。

最佳实践 #

1. 全局材质复用的正确清理方式

若要保留全局材质复用，绝对不能在组件销毁时调用材质的dispose()，而是要手动解除当前组件Mesh与材质的关联：

public ngOnDestroy(): void {
  if (this.mesh) {
    // 解除Mesh与材质的引用
    this.mesh.material = null;
    // 销毁Mesh自身及几何体资源
    this.mesh.geometry.dispose();
    this.mesh.dispose();
    this.mesh = undefined;
  }
}

这样既保留了全局材质供其他组件复用，又解除了当前组件资源与材质的引用链，让垃圾回收能正常清理组件内存。

2. 更合理的材质复用方案

• 单例服务管理：将材质封装到Angular单例服务中，通过依赖注入提供，确保应用内只有一个材质实例，仅在服务销毁（如应用退出）时调用dispose()。
• 材质池机制：对于频繁创建销毁的场景，维护一个材质池，组件需要时从池中获取，销毁时归还到池中，避免重复创建和销毁材质带来的性能开销。

3. 通用Three.js内存清理规则

• 组件销毁时，必须手动清理所有Three.js资源：
  • 解除资源间的引用（如Mesh的material设为null）
  • 调用资源的dispose()方法释放底层WebGL资源
• 避免全局对象意外持有组件或Three.js资源的引用，可通过浏览器DevTools内存快照排查泄漏点。

内容的提问来源于stack exchange，提问作者leol