Vue+Threejs项目性能优化

使用Vue和Three.js开发的项目，但运行一段时间后电脑内存就满了，导致性能下降甚至崩溃，分析内存泄漏的原因优化如下：

资源释放管理

手动释放Three.js资源：

在Vue组件的beforeDestroy或destroyed生命周期中，遍历场景中的网格（Mesh）、几何体（Geometry）、材质（Material）、纹理（Texture）等，并调用.dispose()方法释放内存。

示例代码：

javascript 复制代码

beforeDestroy() {
  this.scene.traverse(child => {
    if (child.isMesh) {
      child.geometry.dispose();
      child.material.dispose();
      if (child.material.map) child.material.map.dispose();
    }
  });
  this.renderer.dispose();
  this.renderer.forceContextLoss();
  this.renderer.domElement = null;
  this.renderer = null;
}

正确停止动画循环

使用cancelAnimationFrame停止渲染循环，避免组件销毁后循环继续执行：

javascript 复制代码

data() {
  return {
    animationFrameId: null
  };
},
methods: {
  animate() {
    this.animationFrameId = requestAnimationFrame(this.animate);
    // 渲染逻辑...
  }
},
beforeDestroy() {
  cancelAnimationFrame(this.animationFrameId);
}

移除事件监听器

在组件销毁时，移除所有与Three.js相关的事件监听器（如resize、mousemove等）：

javascript 复制代码

mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

避免响应式数据持有Three.js对象

不要将Three.js对象存储在Vue的data或computed中，否则Vue的响应式系统会持续跟踪它们，导致无法被垃圾回收。改用非响应式变量：

javascript 复制代码

created() {
  // 使用非响应式变量
  this.scene = new THREE.Scene();
  this.renderer = new THREE.WebGLRenderer();
}

或

javascript 复制代码

// 错误：将 Three.js 对象放入 data
data() {
  return {
    scene: null, // 会被 Vue 代理
  };
},

// 正确：使用非响应式变量
let scene; // 在组件外部声明
export default {
  mounted() {
    scene = new THREE.Scene(); // 直接赋值
  }
}

复用资源与缓存控制

复用几何体、材质和纹理

避免重复创建相同资源，使用对象池（Object Pool）管理可复用的对象。

清理Three.js内部缓存

javascript 复制代码

// 清理材质和几何体缓存
THREE.Cache.clear();

使用InstancedMesh代码构建大量重复模型

InstancedMesh‌是Three.js中用于创建大量具有相同几何体和材质但具有不同世界变换（位置、缩放、旋转）的对象的工具。它通过实例化渲染技术减少绘图调用次数，从而提高渲染性能。

要创建一个InstancedMesh，需要提供三个参数：几何体（BufferGeometry类型）、材质（Material类型）和实例数量（Integer类型）。例如：

javascript 复制代码

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const instancedMesh = new THREE.InstancedMesh(geometry, material, 1000);

这段代码创建了一个包含1000个立方体的场景，每个立方体具有相同的几何体和材质，但位置随机分布‌

纹理优化

使用压缩格式（如.ktx2）和合适的分辨率。

及时销毁不需要的纹理：

javascript 复制代码

texture.dispose();

模型优化

大型模型的加载非常耗性能和时间，可将模型实现分块加载，将大模型拆分为多个glTF文件，使用glTF格式+Draco压缩，

glTF 工具：glTF-pipeline（模型压缩）、Blender（模型优化）

压缩方法请看这篇：模型压缩：gltf-pipeline安装使用

javascript 复制代码

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

// 配置全局模型加载器（建议放在Vue原型或独立模块）
const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/examples/jsm/libs/draco/')
loader.setDRACOLoader(dracoLoader)

按需加载

分块加载场景资源，结合 Vue Router 的懒加载和 Three.js 的 LoadingManager

javascript 复制代码

data() {
    return {
      loadingProgress: 0,
      loadingError: null,
      isLoaded: false
    }
  },
  methods: {
    initScene() {
      // 创建加载管理器
      const loadingManager = new THREE.LoadingManager(
        () => {
          console.log('全部资源加载完成')
          this.isLoaded = true
          this.startRendering()
        },
        (url, loaded, total) => {
          this.loadingProgress = (loaded / total) * 100
        },
        (url) => {
          this.loadingError = `加载失败: ${url}`
          console.error(`加载失败的资源: ${url}`)
        }
      )

      // 使用示例加载器
      const gltfLoader = new THREE.GLTFLoader(loadingManager)
      const textureLoader = new THREE.TextureLoader(loadingManager)

      // 加载多个资源
      gltfLoader.load(
        '/models/greenhouse.glb',
        (gltf) => {
          this.scene.add(gltf.scene)
        }
      )

      textureLoader.load(
        '/textures/ground_basecolor.jpg',
        (texture) => {
          this.material.map = texture
        }
      )
    },
    startRendering() {
      // 场景渲染逻辑...
    }
  }

通过以上策略，可显著提升 Vue + Three.js 项目的流畅性，尤其在复杂场景中效果明显。建议逐步实施优化措施，并通过性能分析工具验证效果。