一、为什么Three.js和框架集成会出现各种“奇奇怪怪”的问题
很多刚接触Three.js+框架开发的开发者，都遇过类似情况：刚做好旋转的立方体，改个页面文案就消失了；切换路由后3D场景卡成一片；或者组件卸载后浏览器内存悄悄涨满... 这些问题的核心，本质是Three.js的“真实DOM/WebGL渲染”和前端框架的“虚拟DOM管理机制”冲突了。
我们平时用的Vue、React，都是靠虚拟DOM高效更新页面：框架会先把页面元素转成虚拟节点存在内存里，一旦有状态变化，就对比新旧虚拟节点，只修改差异部分，避免频繁操作真实DOM。但Three.js完全不按这个逻辑出牌——它是直接生成原生<canvas>节点，然后通过WebGL在画布上画3D内容，这个canvas节点是框架虚拟DOM的“盲区”，一旦框架误以为它是“不需要保留的无效节点”，就会直接删掉，导致整个3D场景崩溃。
二、集成时必须避开的核心“踩坑点”
2.1 绝对别让框架动Three.js的渲染节点
这是最基础也最容易犯的错：不要把Three.js的canvas节点放到框架会动态更新的区域里。举个真实的错误例子：如果在React里用条件渲染包裹Three.js的挂载容器，当框架重新渲染页面时，这个容器会被重建，之前的3D资源直接丢失。 正确的做法是用框架的“固定引用节点”承载Three.js的渲染层，让框架“别碰这个节点”，只在节点内部操作Three.js的内容。下面我们用React技术栈写一个完整示例，每一步都加了注释：
// 技术栈：React 18 + Three.js 0.150
import { useEffect, useRef } from 'react';
import * as THREE from 'three';
// 封装可复用的Three.js场景组件
export default function ThreeEcommerceScene() {
// useRef专门用来存框架不会干预的DOM节点，替代state
const threeMountRef = useRef(null);
useEffect(() => {
// 1. 初始化Three.js核心组件：场景、相机、渲染器
const scene = new THREE.Scene();
// 透视相机：模拟人眼视角，参数分别是视角范围、宽高比、最近/最远渲染距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// WebGL渲染器：负责把3D内容画到canvas上
const renderer = new THREE.WebGLRenderer({ antialias: true }); // antialias开启抗锯齿，画面更平滑
// 2. 把渲染器的canvas加到固定的ref节点里（关键：框架不碰这个节点）
renderer.setSize(window.innerWidth, window.innerHeight);
threeMountRef.current.appendChild(renderer.domElement);
// 3. 加一个可交互的立方体（模拟电商商品）
const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5); // 立方体尺寸
const material = new THREE.MeshStandardMaterial({ color: 0xff5500 }); // 标准材质，支持光照
const productCube = new THREE.Mesh(geometry, material);
scene.add(productCube);
// 4. 加环境光，不然3D物体看起来是全黑的
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 加方向光，模拟太阳光照，让立方体有明暗层次
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
// 5. 设置相机位置，让我们能看到立方体
camera.position.z = 5;
// 6. 动画循环：持续渲染3D场景
const animate = () => {
requestAnimationFrame(animate);
// 让立方体慢慢旋转，模拟商品360度展示
productCube.rotation.x += 0.005;
productCube.rotation.y += 0.005;
renderer.render(scene, camera);
};
animate();
// 7. 组件卸载时的清理函数：释放WebGL资源，避免内存泄漏
return () => {
// 移除挂载的canvas节点
threeMountRef.current.removeChild(renderer.domElement);
// 释放Three.js创建的所有资源（纹理、几何体、材质等）
renderer.dispose();
geometry.dispose();
material.dispose();
};
}, []); // 空依赖数组：只在组件挂载/卸载时执行，避免重复初始化
// 只返回固定的挂载容器，框架不会修改这个节点
return (
<div
ref={threeMountRef}
style={{ width: '100vw', height: '100vh', position: 'fixed', top: 0, left: 0, zIndex: -1 }}
/>
);
}
2.2 框架状态和Three.js变量要彻底隔离
很多开发者会犯的另一个错：把Three.js的核心对象（比如scene、camera）放到框架的useState/状态管理里，结果框架每次更新状态都要序列化这些3D对象，导致报错或者无限重渲染。 正确的做法是：Three.js的对象用普通的JS变量或ref存，不要绑定到框架的响应式状态里——框架管页面的文本、样式、用户交互，Three.js管3D的数学计算和渲染，两者各司其职互不干扰。
三、集成方案的优缺点对比
3.1 自主封装Hook（上面示例的方式）
优点：完全可控，能深度定制复杂3D功能，性能最优，适合做需要极致交互的大型3D项目（比如虚拟展厅、3D建模工具）；缺点：需要自己处理生命周期、资源清理，对开发者的Three.js基础要求高，容易出现内存泄漏。
3.2 用框架封装的第三方库（比如React Three Fiber）
优点：框架底层已经做了适配，自动处理虚拟DOM和真实DOM的冲突，不用自己写useEffect的生命周期逻辑，上手快，适合做快速原型、简单3D场景（比如电商商品预览、3D数据图表）；缺点：定制复杂场景时灵活性受限，部分底层API无法直接调用，性能比自主封装略差。
四、不同框架的特殊适配注意
4.1 React的特殊点
React的useEffect依赖要精准：如果需要处理窗口resize事件（比如调整Three.js相机宽高比），不要直接加window.addEventListener到useEffect里，要加防抖，不然resize时会频繁触发事件，导致性能问题；另外，不要在组件内部直接修改ref.current的引用，要通过useRef的.current属性操作，避免触发框架重渲染。
4.2 Vue的特殊点
Vue要在mounted生命周期里初始化Three.js：Vue的模板渲染是异步的，只有mounted阶段DOM才完全生成，所以必须把Three.js的初始化代码放到mounted钩子函数里；另外，Vue中要用$refs获取DOM节点，和React的useRef逻辑类似，同样要固定节点，别让Vue动态删除。
五、核心应用场景
Three.js+框架的集成，现在已经广泛用在电商的3D商品展示、数据可视化的3D大屏、虚拟试穿、在线教育的3D互动课件等场景——这些场景都需要3D效果和页面的其他元素（比如商品详情按钮、数据筛选控件）联动，框架的状态管理刚好能帮我们处理这种跨组件的交互，不用自己写复杂的事件总线。
六、总结
总之，Three.js跨框架集成的核心逻辑就是：把Three.js的渲染层和框架的虚拟DOM彻底隔离开，用固定的节点承载3D内容，不要让框架干预WebGL资源的生命周期，选集成方案时根据项目复杂度决定——简单场景用封装好的第三方库，复杂场景自己写Hook更可控。只要避开DOM冲突、状态绑定、资源清理这三个核心坑，就能顺利在Vue/React项目里用上Three.js，开发出流畅的3D交互功能。
评论
围绕“Three.js跨框架集成问题：适配Vue/React框架的开发注意事项”参与讨论