文章目录
- [Three.js 与前端框架集成实战：Vue/React 生命周期对齐与热更新避坑](#Three.js 与前端框架集成实战：Vue/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。
五、结语
框架集成本质是生命周期对齐：谁创建谁销毁，渲染循环与资源释放成对出现，线上才稳。