做设备演示、产品拆解、工业数字孪生可视化的朋友最近大概率都碰到过同一个需求一个装配体模型能不能一键“炸开”让每个零件从整体里飞出来看清楚内部结构再一键合拢。这就是 3D 模型爆炸分解配合 Three.js 的动画实现几乎是可视化项目里最讨喜的交互之一。它解决的问题很直接——让复杂结构从“看懂整体”变成“看清每一层”客户看一眼就明白这台设备是怎么装起来的。这篇文章适合有基础 JavaScript、想入门 Three.js 的前端也适合做工业数字孪生、产品展示、教育科普的从业者。我不打算只丢一段代码而是把方向向量怎么算、坐标系为什么容易飞歪、几千个零件怎么不卡全流程拆开讲清楚。1. 爆炸分解到底在解决什么问题1.1 从应用场景倒推技术需求爆炸分解Exploded View这个词其实来自机械制图和装配说明书早年是工程师手工画的把螺丝、齿轮、外壳沿着某个轴向拉开中间画虚线示意装配关系。放到三维里底层逻辑没变只是从静态图变成了可交互动画。你打开一个工业数字孪生的看板点“爆炸视图”几十个零件同时从设备主体向四周散开每个零件还能单独点击看名称、看参数这就是我们今天要做的东西。场景决定了技术需求。第一零件不是随便飞的方向得有物理感不能像烟花一样乱炸否则用户看不懂结构层级。第二动画要可控能暂停、能反向合拢、能只爆炸某一层。第三性能要稳一个发动机模型几千个零件全屏散开还得保持流畅。这三个需求直接决定了后面所有的方案选型方向靠质心向量算动画靠时间驱动插值性能靠扁平化和合批。很多新手一上来就想着给每个零件写一段独立动画结果几十个零件就把主线程拖爆了根子就在于没从需求反推架构。我见过不少项目把爆炸做成“随机散开”视觉上确实花哨但用于产品演示时客户第一句就是“这零件飞哪去了”。所以做这个效果之前先明确它是展示工具而不是艺术特效方向的可解释性比随机性重要得多。1.2 为什么选 Three.js 而不是其他方案选 Three.js 有几个很现实的原因。它生态成熟GLTF 加载、轨道控制、后处理这些常用的东西官方示例里都有现成的不用从零造轮子模型格式兼容性也好从三维软件导出的 glTF、glb 基本能直接用。相比之下如果是更重的数字孪生场景比如带地形、带大范围场景的会考虑 Cesium 那套但对于单个装配体的爆炸分解Three.js 的体量和灵活性更合适上手快、打包小、调试直观。另一个关键点是动画控制。Three.js 的场景图给了你完整的父子层级和矩阵变换能力你可以精确控制每个 mesh 的 position也能用 group 做整体偏移。这个自由度对爆炸分解至关重要因为你要在“局部坐标”和“世界坐标”之间来回换算场景图算错了就会出各种鬼畜效果。当然如果你追求更省事的补间动画可以搭配 GSAP 这类库但爆炸分解的核心逻辑还是绕不开矩阵和向量运算理解底层比堆库更重要。我不推荐用纯 CSS3D 或者纯 SVG 做爆炸二维投影很难表现深度和遮挡关系零件一多就糊成一团。三维问题还是交给三维引擎解决这没什么好纠结的。2. 爆炸分解的核心原理拆解2.1 方向向量零件到底往哪飞爆炸分解的数学本质简单到一句话就能说清每个零件沿着“模型整体质心指向该零件质心”的方向平移一段距离。把它写成公式就是offset normalize(partCenter - modelCenter) * distance。这里的 partCenter 是零件自身包围盒的中心modelCenter 是整个模型的包围盒中心两者相减得到一条从整体指向局部的射线归一化之后就是方向再乘上你想要的爆炸强度就是位移量。为什么用质心方向而不是固定轴向因为固定轴向比如统一往 Y 轴拉在规则结构里还行遇到不对称的模型就露馅了比如一个 L 形的支架它的零件显然应该向四周散而不是都往一个方向跑。质心方向的好处是自适应任何形状的模型都能得到一个“从内向外”的自然扩散效果。如果模型是环形、球形的这个方向算出来会非常均匀漂亮。有个细节要提醒distance 是每帧动态算的还是固定值我习惯用“零件到中心的距离乘以一个系数”作为位移基准这样原本离得远的零件飞得远离得近的飞得近爆炸后整体轮廓会等比放大视觉层次更连贯。如果所有零件都飞同样的距离靠近中心的零件可能刚飞一点点就撞到外围零件近的挤成一团、远的一动不动观感很糟。2.2 位移与缓动怎么飞才自然方向定了剩下的是“怎么飞过去”。这里最容易犯的错是直接插值position lerp(start, end, t)线性运动机械感很重像机器人。真实一点的效果需要缓动曲线。缓动函数的作用是让 t 从 0 到 1 的过程中速度先慢后快再慢也就是常说的 easeInOut。爆炸这种“先蓄力再爆开”的动作easeOut 更合适开头快、结尾缓模拟惯性停下零件飞出去后有个减速的收尾感觉。常用的缓动函数里三次缓动easeInOutCubic是最通用的代码就三行function easeInOutCubic(t) { return t 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t 2, 3) / 2; }如果你想要更“脆”的爆炸感可以用指数缓动或者回弹缓动back零件飞过头一点点再回来机械装配的感觉会更足。不过要注意回弹缓动在合拢时容易显得晃产品演示里我一般只用轻微的 easeOutBack系数控制在 1.1 左右过了就显得轻浮。还有一个提升观感的技巧叫“错峰”让零件不要同时起飞。按零件到中心的距离排序逐个加一点延迟近的先飞、远的后飞或者反过来整体会有波浪扩散的感觉。实现上给每个零件挂一个 delay 值动画进度localT clamp((globalT - delay) / duration, 0, 1)就能做出错峰效果。这个细节加上去质感和没有错峰完全是两个档次。2.3 坐标系陷阱为什么你的零件会飞歪这是新手最容易翻车的地方也是普通教程里很少讲透的。问题出在你算方向向量时用的是世界坐标因为要从整体质心出发但你设置mesh.position时改的却是父节点的局部坐标。如果模型层级里每一级都没有旋转和缩放而且模型本身就在世界原点附近那两者恰好一致代码能跑。一旦模型带了缩放、旋转或者零件挂在有位移的父节点下世界方向直接加到局部 position 上零件就会朝奇怪的方向飞。解决办法有两种。第一种是“烘焙扁平化”把整个模型所有 mesh 的世界变换直接烘焙进几何体让每个 mesh 都变成位于世界坐标、position 为原点的独立网格挂到一个干净的 group 下。这样每个 mesh 的 position 就是世界坐标方向向量可以放心地直接加。第二种是保留层级但把世界方向用父节点的逆矩阵转回局部空间再应用数学上等价但代码更绕。工程里我几乎无脑选第一种简单、可控、不易错。烘焙的思路是遍历所有 mesh克隆它的 geometry用geometry.applyMatrix4(mesh.matrixWorld)把世界矩阵压进顶点然后新建一个 mesh 挂到 group 里。这样层级被拍平但视觉效果完全不变。后面算包围盒、算质心、加位移全都在同一个坐标空间里再也不会飞歪。代价是如果多个零件共用同一个 geometry烘焙后会各自复制一份内存会涨这点在零件极多的时候要注意优化。3. 模型预处理与场景搭建3.1 场景、相机、渲染器的最小骨架任何 Three.js 项目的第一步都是搭骨架这部分重复度高但值得写清楚参数怎么定。相机用透视相机视野 45 度左右比较自然太广会有明显的透视畸变太窄又像压扁的。初始位置放在(3, 3, 5)这类斜上方视角配合轨道控制器能让用户自己转。渲染器一定要开抗锯齿然后限制pixelRatio不超过 2这是移动端和视网膜屏上防掉帧的标配像素比开到 3 甚至 4等于白白多渲染几倍像素画面肉眼几乎看不出差别帧率却腰斩。const scene new THREE.Scene(); const camera new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000); camera.position.set(3, 3, 5); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); document.body.appendChild(renderer.domElement); const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true;灯光这块金属材质的机械模型对环境光很敏感只用一盏方向光会显得死板。我一般这么配环境光 0.6 到 0.8 打底一盏主方向光从斜上方打再加一盏补光从另一侧弱强度打条件允许的话加个简单的环境贴图HDRI金属反射会立刻有质感。没有环境贴图时MeshStandardMaterial的金属度调太高会变黑因为没东西反射这是新手常见疑惑遇到“模型发黑”先检查金属度和环境贴图。3.2 模型加载与“扁平化”烘焙加载用官方的 GLTFLoader它在 examples 的 jsm 目录下要注意版本路径新版本 Three.js 的 examples 引用方式改过几次路径写错是高频报错来源。加载完成后先别急着加进场景先做扁平化处理。import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js; const loader new GLTFLoader(); loader.load(model.glb, (gltf) { const { group, meshes } flattenModel(gltf.scene); scene.add(group); setupExplode(meshes, group); }); function flattenModel(root) { const group new THREE.Group(); const meshes []; root.updateMatrixWorld(true); root.traverse((child) { if (!child.isMesh) return; const geo child.geometry.clone(); geo.applyMatrix4(child.matrixWorld); const mesh new THREE.Mesh(geo, child.material); mesh.userData.name child.name; group.add(mesh); meshes.push(mesh); }); return { group, meshes }; }这里有个容易被忽略的点child.material直接复用如果多个零件共用材质后面做点击高亮时会“一改全改”。解决办法是在高亮时克隆材质或者只对材质做临时替换再还原别直接改共享材质的颜色。我一般把每个 mesh 的材质在扁平化时克隆一份虽然内存多一点但交互逻辑干净很多不会出现点一个零件全场景变色的尴尬。另外geometry.clone()对大数据模型有开销几百个零件还好上千个就要考虑合并几何BufferGeometryUtils.mergeGeometries后只保留必要交互或者用 InstancedMesh这个后面性能部分再展开。3.3 归一化让不同模型都能直接用每个从三维软件导出的模型尺寸单位都不一样有的以毫米建模导出后包围盒几百上千有的以米只有零点几。如果你的相机位置写死(3, 3, 5)遇到前者模型直接顶出屏幕遇到后者小得看不见。所以加载后必须做归一化算出模型整体包围盒把它缩放到一个统一的目标尺寸比如最长边固定为 4然后平移让中心落在原点。const box new THREE.Box3().setFromObject(group); const size box.getSize(new THREE.Vector3()); const center box.getCenter(new THREE.Vector3()); const maxSide Math.max(size.x, size.y, size.z); const scale 4 / maxSide; group.scale.setScalar(scale); // 缩放后重新计算中心并平移 box.setFromObject(group); box.getCenter(center); group.position.sub(center.multiplyScalar(scale));注意顺序先缩放再重新算包围盒再居中因为缩放会改变包围盒。居中的意义不只是视觉还关系到后面质心向量的计算模型中心必须在原点附近方向向量才准。很多教程跳过归一化直接给模型读者换一个模型就各种偏移问题大多出在这。归一化还有一个好处是相机可以固定不用根据每个模型手动调距离。你只要把相机和目标点按目标尺寸设定好所有模型进来都自动适配不用一个个试。这套流程搭好后以后换任意 glb 模型改个路径就能直接出爆炸效果。4. 爆炸分解的完整实现4.1 计算每个零件的分解方向模型准备好之后进入核心环节。先算整体中心再逐个算零件质心和方向。由于前面已经扁平化并居中所有 mesh 的 position 都是原点几何体的顶点就是世界坐标质心可以直接用geometry.boundingBox的中心来近似。const totalBox new THREE.Box3().setFromObject(group); const modelCenter totalBox.getCenter(new THREE.Vector3()); const parts []; meshes.forEach((mesh) { mesh.geometry.computeBoundingBox(); const partCenter mesh.geometry.boundingBox .getCenter(new THREE.Vector3()); const dir partCenter.clone().sub(modelCenter).normalize(); const dist partCenter.distanceTo(modelCenter); parts.push({ mesh, dir, // 爆炸方向 baseDistance: dist, // 到中心的距离 explodeOffset: dir.clone().multiplyScalar(dist * 0.6 0.3), delay: 0, // 错峰延迟 }); });这里的dist * 0.6 0.3是位移公式为什么要加常数项 0.3因为如果某零件的质心恰好和模型中心重合dist为 0方向向量归一化时除以零会得到 NaN零件直接消失。加一个小常数兜底同时保证最中心的零件也能飞出一小段不至于原地不动。这是实际踩过的坑模型里遇到过对称工况中心零件就是不动排查半天才发现是归一化除零。方向算完后可以按距离排序做错峰延迟让远的零件飞得更远、飞得更晚一点层次感马上出来parts.sort((a, b) a.baseDistance - b.baseDistance); parts.forEach((p, i) { p.delay i * 0.004; });延迟系数别太大0.004 秒量级就够乘上几十上百个零件最后一批也就延迟零点几秒。系数给到 0.02排到后面的零件要等好几秒才起飞用户以为死机了。4.2 动画驱动的三种写法与取舍动画驱动有三种常见写法各有适用场景。第一种是纯手写requestAnimationFrame加时间插值最灵活、零依赖适合想完全掌控节奏的项目。第二种是引入 GSAPgsap.to一行搞定补间和缓动代码量最少适合快速原型和需要时间轴编排的复杂动画。第三种是 Three.js 自带的 AnimationMixer配合关键帧适合模型自带动画的场景但用它来做爆炸有点杀鸡用牛刀配置反而麻烦。我个人在正式项目里偏向手写加一点点封装因为爆炸和合拢是双向的、可打断的手写状态机最清晰。核心就是一个全局进度progress从 0 到 1每帧根据它更新每个零件的位置let progress 0; let target 0; const clock new THREE.Clock(); function animate() { requestAnimationFrame(animate); const dt clock.getDelta(); // 用阻尼逼近目标值形成平滑过渡 progress (target - progress) * Math.min(dt * 4, 1); parts.forEach((p) { const local THREE.MathUtils.clamp( (progress - p.delay) / (1 - p.delay 0.001), 0, 1 ); const eased easeInOutCubic(local); p.mesh.position.copy( p.explodeOffset.clone().multiplyScalar(eased) ); }); controls.update(); renderer.render(scene, camera); } animate();这里我用“阻尼逼近”代替固定时长的补间好处是无论用户何时点击进度都平滑地向目标靠拢中途反向点击也能立刻掉头不会出现动画打架。缺点是到达终点的绝对时间不固定但爆炸这种交互本来也不需要精确时长。如果你需要严格的时长控制就换成基于起始时间的线性进度加缓动两种思路都能用看项目对节拍的要求。时长敏感用时间插值交互敏感用阻尼逼近。这句话是我反复试出来的经验做演示大屏时领导要卡节拍就用固定时长做网页交互按钮时阻尼手感更好。还有个小优化explodeOffset.clone()每帧都 clone 会产生大量临时对象零件多了 GC 压力大。正确做法是预先给每个零件分配一个临时向量复用或者直接用multiplyScalar到已有向量上别在循环里 new。这个细节在几十个零件时无所谓上千个零件时能明显感觉到帧率差别。4.3 点击高亮与装配回归爆炸视图的交互闭环一般是点击爆炸按钮散开 - 鼠标划过零件高亮 - 点击零件显示信息 - 合拢按钮收回去。高亮用射线拾取Raycaster实现把鼠标坐标归一化到-1 到 1的设备坐标然后从相机投射射线与所有零件求交命中最近的那个。const raycaster new THREE.Raycaster(); const pointer new THREE.Vector2(); renderer.domElement.addEventListener(pointermove, (e) { pointer.x (e.clientX / innerWidth) * 2 - 1; pointer.y -(e.clientY / innerHeight) * 2 1; raycaster.setFromCamera(pointer, camera); const hits raycaster.intersectObjects(meshes, false); setHover(hits.length ? hits[0].object : null); });高亮的实现别用改材质颜色这种粗暴方式容易污染共享材质。推荐用emissive自发光或者加描边。最简单的是改 emissivefunction setHover(mesh) { if (hovered mesh) return; if (hovered) hovered.material.emissive.setHex(0x000000); hovered mesh; if (hovered) hovered.material.emissive.setHex(0x2255ff); }注意emissive要求材质是支持自发光的类型MeshBasicMaterial没有这个属性会报错。拾取高亮前先确认模型用的是MeshStandardMaterial或MeshPhongMaterial。合拢就是把 target 设回 0同一套进度逻辑反向跑一遍零件就归位了。这里有个细节如果零件在爆炸状态下被用户拖动旋转过模型合拢依然按原始位置计算因为我们的explodeOffset是相对原始位置的固定偏移不受相机和控制器影响所以合拢永远能回到原位不用担心对不上。如果需要更精细的“分层爆炸”比如只炸某一层外壳、内层不动可以给每个零件按装配层级打标签动画时只对选定标签的零件应用位移其余保持。工业演示里经常用这种分级爆炸一层层剥开给客户看。5. 常见坑与排查技巧实录5.1 零件不动/飞歪/穿模排查表做爆炸效果时问题表现就那么几类我整理成一张速查表遇到对应症状直接对号入座能省下大量调试时间。症状最可能的原因排查与解决模型加载后全黑缺灯光或金属度过高无环境贴图加环境光降低金属度或加 HDRI模型看不到但代码没报错模型尺寸异常超出相机范围打印包围盒做归一化缩放零件全部飞向同一方向方向算错质心用了局部坐标检查是否已扁平化统一坐标系部分零件文思不动质心与中心重合归一化除零位移公式加常数项兜底零件飞歪、穿模世界方向直接加到局部 position烘焙扁平化后再应用位移动画卡顿、掉帧循环内 new 对象、像素比过高复用临时向量限制 pixelRatio点击高亮无反应材质不支持 emissive 或射线未更新换材质类型检查相机矩阵更新合拢后位置对不上保存的原始位置被覆盖保存独立原始位置不复用工作变量这张表里的每一条我几乎都亲自踩过。尤其是“全黑”和“飞歪”这两条新手会反复遇到。全黑的根因大多是没有环境贴图时把metalness设成了 1金属完全靠反射环境没环境反射自然全黑。飞歪则是坐标系没统一这个在层级复杂的模型里特别隐蔽因为简单模型恰好不出错一换复杂模型就暴露。穿模是另一个高频问题。当爆炸强度给得太大或者方向计算有偏差时原本不该相交的零件会互相穿透。排查方法是把爆炸强度调小看是否仍穿模如果只剩近距离穿模通常是方向精度问题或模型本身零件贴得太近爆炸强度控制在适中范围前面公式的 0.6 系数就是经验值基本能避开。5.2 性能优化从几百到上万零件零件数量一上来性能就是分水岭。几百个零件上面的实现能稳跑上千个零件光遍历和射线检测就够呛上万零件必须换思路。优化分几个层次。第一层是减少 draw call。每个 mesh 一次渲染调用零件多的时候开销巨大。如果某些零件的爆炸行为一致、材质一致可以把它们的几何体合并成一个 BufferGeometry用一次调用渲染但代价是失去独立拾取。这时候可以用“分组爆炸”把同一层、同一模块的零件合并交互粒度到模块级别兼顾性能和可操作性。第二层是射线检测优化。全场景每次鼠标移动都做射线检测上千个 mesh 会卡。解决办法是节流比如用pointermove加 50 毫秒节流或者只在鼠标停下时检测。更进一步可以用八叉树Octree加速空间查询Three.js 社区有现成实现把零件塞进八叉树后射线只和附近的相交效率高一个量级。第三层是材质和几何复用。前面为了高亮克隆了材质零件极多时内存吃紧可以改成“共享材质 单独高亮时临时换材质”用完还原。几何体如果本身有大量重复用 InstancedMesh 渲染成百上千个相同零件几乎是零成本但爆炸位移需要写进实例矩阵比改 position 略复杂属于进阶玩法。第四层是渲染层面的自适应。用renderer.info看一下 draw call 和三角面数心里有数。超过一两百个 draw call 就要警惕。然后给渲染器加个简单的帧率监测低端设备上自动降低 pixelRatio 或者用renderer.setAnimationLoop配合帧率控制别让卡顿拖垮整个页面。5.3 移动端与低端设备适配移动端做这个效果体验和桌面完全两回事。首先是触摸交互pointermove在手机上会同时响应滑动和轨道控制器的旋转冲突容易误触高亮。我的做法是移动端默认关掉悬停高亮改成“点选”用户点一下选中零件并弹出信息再点一下取消交互更清晰。其次是性能预算。手机 GPU 弱抗锯齿和高像素比都要克制antialias在移动端可以关掉pixelRatio 限制到 1.5 甚至 1。爆炸动画本身不重重的是渲染和拾取屏幕小反而占了便宜但发热和耗电是实打实的长时间展示要考虑降低帧率或者让静止状态不重绘。第三是模型本身要瘦身。移动端加载几十兆的模型是灾难导出前要做减面、合并材质、压缩纹理glb 配合 Draco 压缩能把体积砍到几分之一。加载时给个进度条别让用户对着白屏干等。这些准备做在前面比后面花时间优化代码划算得多。移动端宁简勿繁。我在手机上试过最豪华的爆炸效果加了描边、阴影、环境反射结果低端机直接掉到二十帧。后来砍掉所有花哨效果只保留爆炸和点选体验反而更好。6. 一些实操之外的延伸想法把爆炸分解跑通之后你会发现这套“方向向量 进度插值”的框架其实很通用。同一个思路可以拿来做零件的分解装配演示、故障件的拆解定位、甚至产品包装的开箱效果。方向向量决定了运动方向进度控制决定了节奏两者解耦得很干净想换成螺旋散开、分层平移、径向扩散只需要改方向或位移公式动画层几乎不用动。我还试过把爆炸和相机运镜结合零件散开的同时相机缓缓推近镜头语言比单纯散开更有冲击力。但这属于锦上添花节奏没调好反而晕。实操里更实用的扩展是“局部爆炸”只对用户框选或点选的模块做爆炸其余保持原位配合搜索定位功能在大型设备模型里找零件非常高效。最后分享一个我踩过的坑不要用mesh.position同时存原始位置和动画位置。我早期图省事把爆炸位移直接累加到 position 上结果来回爆炸几次零件位置就漂移了越炸越偏。正确做法是另存一个独立的基准位置动画永远从基准出发计算绝对值而不是在原值上叠加。这个原则放到任何 Three.js 动画里都成立位置动画要算绝对值别做累加不然误差会一直攒着。还有一点模型导入后mesh.name经常是空的或者全是默认名指名道姓做交互会抓瞎。我在实际项目里会预先在建模软件里给关键零件命好名或者在代码里按几何位置、材质、体积给零件打标签这样爆炸时才能按层、按模块做筛选。命名规范这件事看着小等到要做几百个零件的交互时全靠它是省心的关键。把模型命名、爆炸方向、动画进度这三样管好一个能拿得出手的爆炸分解效果基本就成了。