threejs-animation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

ALWAYS use this skill when the user mentions:

```
AnimationMixer.update
```
,
```
AnimationAction
```
play/pause/stop, crossfade, synchronized clips
```
AnimationClip
```
from glTF or
```
AnimationClipCreator
```
, retargeting caveats at API level
Keyframe tracks: position/rotation/scale/color tracks, boolean/string tracks where applicable
IK:
```
CCDIKSolver
```
/
```
CCDIKHelper
```
from addons

IMPORTANT: animation vs objects

threejs-animation = time evaluation and tracks.
threejs-objects =
```
SkinnedMesh
```
/
```
Skeleton
```
attachment, bind pose—mesh side.

Trigger phrases include:

"AnimationMixer", "AnimationAction", "AnimationClip", "crossFade", "KeyframeTrack"
"动画混合", "骨骼动画", "剪辑", "淡入淡出"

当用户提及以下内容时，务必使用此技能：

```
AnimationMixer.update
```
、
```
AnimationAction
```
的播放/暂停/停止、交叉淡入淡出、同步剪辑
来自glTF的
```
AnimationClip
```
或
```
AnimationClipCreator
```
、API层面的重定向注意事项
关键帧轨道：位置/旋转/缩放/颜色轨道，以及适用的布尔/字符串轨道
IK：附加组件中的
```
CCDIKSolver
```
/
```
CCDIKHelper
```

重要提示：动画与对象的区别

threejs-animation = 时间计算与轨道。
threejs-objects =
```
SkinnedMesh
```
/
```
Skeleton
```
绑定、绑定姿势——网格侧。

触发短语包括：

"AnimationMixer"、"AnimationAction"、"AnimationClip"、"crossFade"、"KeyframeTrack"
"动画混合"、"骨骼动画"、"剪辑"、"淡入淡出"

How to use this skill

如何使用此技能

Collect clips from
```
gltf.animations
```
or create with utilities /
```
AnimationClipCreator
```
.
Create mixer bound to root object (often
```
scene
```
or rig root).
Create actions per clip via
```
mixer.clipAction(clip)
```
; configure loop mode (
```
LoopOnce
```
,
```
LoopRepeat
```
,
```
LoopPingPong
```
).
Per frame: compute delta seconds (use
```
Clock
```
from core—documented under Core in docs index), call
```
mixer.update(delta)
```
.
Blending: adjust
```
weight
```
,
```
crossFadeTo
```
,
```
enabled
```
flags; watch for additive vs full replacement semantics per docs.
PropertyBinding: understand path strings targeting bones/morphs—errors often from wrong object names.
IK addon: attach solver after base animation if using CCD IK from examples.

See examples/workflow-mixer-action.md.

收集剪辑：从
```
gltf.animations
```
中获取，或使用工具 /
```
AnimationClipCreator
```
创建。
创建混合器：绑定到根对象（通常是
```
scene
```
或绑定根节点）。
创建动作：通过
```
mixer.clipAction(clip)
```
为每个剪辑创建动作；配置循环模式（
```
LoopOnce
```
、
```
LoopRepeat
```
、
```
LoopPingPong
```
）。
逐帧更新：计算增量秒数（使用核心模块中的
```
Clock
```
——文档索引的核心部分有说明），调用
```
mixer.update(delta)
```
。
混合：调整
```
weight
```
、
```
crossFadeTo
```
、
```
enabled
```
标志；注意文档中说明的叠加与完全替换语义的区别。
PropertyBinding：理解用于定位骨骼/形变目标的路径字符串——错误通常源于对象名称不正确。
IK附加组件：如果使用示例中的CCD IK，需在基础动画之后附加求解器。

参见 examples/workflow-mixer-action.md。

Doc map (official)

文档导航（官方）

Docs section	Representative links
Animation (index)	https://threejs.org/docs/#Animation
Action	https://threejs.org/docs/AnimationAction.html
Mixer	https://threejs.org/docs/AnimationMixer.html
Clip	https://threejs.org/docs/AnimationClip.html
Tracks	https://threejs.org/docs/KeyframeTrack.html

More: references/official-sections.md.

文档板块	代表链接
动画（索引）	https://threejs.org/docs/#Animation
动作	https://threejs.org/docs/AnimationAction.html
混合器	https://threejs.org/docs/AnimationMixer.html
剪辑	https://threejs.org/docs/AnimationClip.html
轨道	https://threejs.org/docs/KeyframeTrack.html

更多内容：references/official-sections.md。

Scope

适用范围

In scope: Core Animation module, keyframe pipeline, listed addons for clip creation and IK.
Out of scope: DCC export best practices; physics ragdoll; audio sync (link conceptually only).

适用范围： 核心动画模块、关键帧管线、上述用于剪辑创建和IK的附加组件。
不适用范围： DCC导出最佳实践；物理布娃娃系统；音频同步（仅作概念性关联）。

Common pitfalls and best practices

常见陷阱与最佳实践

Forgetting
```
mixer.update
```
freezes animation; double
```
update
```
per frame speeds up.
Mixing clips with incompatible hierarchies causes violent pops—validate bind pose.
Root motion must be handled in game logic if not baked—document explicitly.
Large track counts cost CPU—strip unused tracks in preprocessing when possible.

忘记调用
```
mixer.update
```
会导致动画冻结；每帧重复调用
```
update
```
会导致动画加速。
混合层级不兼容的剪辑会导致剧烈跳变——请验证绑定姿势。
如果根运动未烘焙，必须在游戏逻辑中处理——需明确说明。
轨道数量过多会消耗CPU——尽可能在预处理阶段移除未使用的轨道。

Documentation and version

文档与版本

Behavior of

AnimationMixer

, tracks, and glTF animation import can change between three.js majors. Treat the Animation section of the docs index as authoritative for the user’s installed version; when upgrading, check the three.js repository release notes and migration notes for renamed properties or loader output.

AnimationMixer

、轨道以及glTF动画导入的行为可能会在three.js主版本之间发生变化。对于用户安装的版本，以文档索引中的动画板块为准；升级时，请查看three.js仓库的发布说明和迁移说明，了解属性重命名或加载器输出的变化。

Agent response checklist

Agent回复检查清单

When answering under this skill, prefer responses that:

Cite the exact class (
```
AnimationMixer
```
,
```
AnimationAction
```
, etc.) or addon (
```
CCDIKSolver
```
) from the official docs.
Include at least one
```
https://threejs.org/docs/...
```
link (e.g. AnimationAction).
Relate clips to
```
SkinnedMesh
```
/ skeleton via threejs-objects when deformation is involved.
Mention
```
mixer.update(delta)
```
and a stable time source (
```
Clock
```
) explicitly.
Reference official examples by name only (no full file paste).

在此技能下回答问题时，优先遵循以下要求：

引用官方文档中的确切类名（
```
AnimationMixer
```
、
```
AnimationAction
```
等）或附加组件名（
```
CCDIKSolver
```
）。
至少包含一个
```
https://threejs.org/docs/...
```
链接（例如 AnimationAction）。
涉及变形时，通过threejs-objects将剪辑与
```
SkinnedMesh
```
/ 骨骼关联起来。
明确提及
```
mixer.update(delta)
```
和稳定的时间源（
```
Clock
```
）。
仅通过名称引用官方示例（不要粘贴完整文件内容）。

References

参考资料

Keywords

关键词

English: animationmixer, animationaction, animationclip, keyframetrack, crossfade, skinning, propertybinding, three.js

中文： 动画混合、AnimationMixer、AnimationAction、关键帧、骨骼动画、剪辑、淡入淡出、three.js

English: animationmixer, animationaction, animationclip, keyframetrack, crossfade, skinning, propertybinding, three.js

中文： 动画混合、AnimationMixer、AnimationAction、关键帧、骨骼动画、剪辑、淡入淡出、three.js

能力边界

✅ 适用场景

当你需要使用此技能对应的技术栈时
当项目需要遵循最佳实践时
当需要快速上手或深入理解核心概念时

当你需要使用此技能对应的技术栈时
当项目需要遵循最佳实践时
当需要快速上手或深入理解核心概念时

⚠️ 需要注意

复杂业务逻辑需要结合具体场景调整
性能优化需要根据实际数据量评估

复杂业务逻辑需要结合具体场景调整
性能优化需要根据实际数据量评估

❌ 不适用场景

不相关的技术栈或框架
需要完全自定义的特殊场景

不相关的技术栈或框架
需要完全自定义的特殊场景

常见陷阱 (Gotchas)

版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。