Three.js 与前端框架集成实战：Vue/React 生命周期对齐与热更新避坑

文章目录

• [Three.js 与前端框架集成实战：Vue/React 生命周期对齐与热更新避坑](#Three.js 与前端框架集成实战：Vue/React 生命周期对齐与热更新避坑)
• • [一、推荐结构：Renderer 单例 + 场景对象可替换](#一、推荐结构：Renderer 单例 + 场景对象可替换)
  • [二、Vue 侧要点](#二、Vue 侧要点)
  • [三、React 侧要点](#三、React 侧要点)
  • 四、热更新常见坑
  • 五、结语

Three.js 与前端框架集成实战：Vue/React 生命周期对齐与热更新避坑

把 Three.js 嵌进 Vue 或 React 并不难，难的是路由切换、热更新、StrictMode带来的重复初始化与资源泄漏。

一、推荐结构：Renderer 单例 + 场景对象可替换

• Renderer、Camera、Controls 尽量长生命周期
• 业务模型随路由卸载时，只 dispose 场景子树

二、Vue 侧要点

• 使用 onBeforeUnmount 统一 cancelAnimationFrame、移除 resize 监听
• watch 路由时避免重复 new THREE.WebGLRenderer
• 若用 keep-alive，要在 deactivated 暂停渲染循环

三、React 侧要点

• StrictMode 开发环境会双调用 effect，需幂等初始化或加守卫
• useEffect 清理函数里释放几何/材质/纹理
• 避免在 render 阶段创建重型对象

四、热更新常见坑

模块热替换可能导致全局变量残留一份旧 renderer。建议把 Three 资源挂在 ref 或单例模块上，并在 HMR 边界显式 dispose。

五、结语

框架集成本质是生命周期对齐：谁创建谁销毁，渲染循环与资源释放成对出现，线上才稳。