技能介绍

这个技能解决的问题

把 3D 模型塞进浏览器，远不止「调一次 loader.load」那么简单。glTF 里带着 PBR 材质、烘焙动画和嵌套节点层级，加载完成后你拿到的是一个 Object3D 树加一串 AnimationClip，接下来全是细节：动画要 mixer.update(delta) 每帧推进、时间单位是秒、压缩几何要走解码器、甚至模型看不见可能只是因为场景里没有灯。这个技能把这些反复出现的坑整理成一套可复用的工作流。

核心能力与关键步骤

加载与挂载：用 GLTFLoader 读取 .gltf/.glb，结果里的 gltf.scene 是根节点，gltf.animations 是动画剪辑，gltf.cameras 和 gltf.asset 也别忽略。
层级检查：通过 traverse 或 getObjectByName 遍历节点树，找出需要单独控制的部位。
动画播放：每个被动画驱动的根节点配一个 AnimationMixer，clipAction(clip).play() 后每帧调用 mixer.update(delta)；跨剪辑过渡也有对应写法。
压缩资源解码：挂上 DRACOLoader 和 KTX2Loader（必要时加 Meshopt），并用 setDecoderPath / setTranscoderPath 指向与 three.js 版本匹配的解码文件。
加载验证：打印场景图和 gltf.animations，确认模型缩放正确、受光照可见、剪辑确实在动。

适用边界与注意点

它只负责「把模型加载进来并跑动画」这一段。渲染器、相机和渲染循环属于 threejs-scene-setup，材质、灯光和环境贴图属于 threejs-materials-lighting，两者都不在本技能范围内。用 Blender 制作或导出模型也不是它的职责；运行时优先选 glTF 而不是 OBJ（无场景图、无动画）或 FBX（体积大）。

几个高频坑：模型加载了却看不见，通常是 PBR 材质缺光或缺 scene.environment，也可能是 glTF 以米为单位而资产只有 0.01 的缩放；load 是异步的，mixer 和引用要在回调里赋值，或改用 loadAsync；动画不动，多半是忘了每帧 update、传了毫秒而非秒，或没调 action.play()；解码失败几乎都是解码器路径与 three.js 版本不匹配。另外，导出器有时会把 scale/rotation 烘焙到子节点上，动手改 transform 之前先把层级树 dump 出来看一遍，原点不对的话用干净的 Object3D 重新做父级更省事。