ANIMATION · Vite + three
glTF 动画混合器glTF AnimationMixer
加载带动画的 glTF,AnimationMixer 播放 / 切换 / 交叉淡入 clip。
旗舰完整演示
可交互场景(拖拽旋转;部分演示支持键盘)。下方提示词用于让 Agent 生成同级成品。
预期产出 · Returns
Vite:下拉选择动画 clip,播放暂停,timeScale 调节。
适合用在哪
角色预览、机械臂演示、可动产品模型。
容易踩的坑
- 切换 clip 未 fade 会瞬间跳帧。
- mixer 未 update 动画静止。
提示词 · Prompt
Vite + Three.js:
1) GLTFLoader 加载带 animations 的模型(Fox 等示例 URL);
2) AnimationMixer + AnimationAction,列出所有 clip 名称;
3) UI select 切换 clip,支持 fade 0.3s 交叉;
4) 播放/暂停按钮与 timeScale slider;
5) update 中 mixer.update(delta);
6) 卸载时 stopAllAction 并 dispose。
完整源码。
Vite GLTF animations with mixer, clip select, fade, timeScale, proper dispose.