SuperAPI AI 工具集

threejs-animation

设计与创作

查看项目

更新于 10-16 05:47

技能介绍

Three.js 动画系统技能,用于在 Three.js 场景中为对象和模型添加动画。

用途:动画化网格与模型、播放 GLTF 中的骨骼动画、通过形变目标实现表情过渡、混合多条动画。

主要能力:AnimationClip 存储关键帧数据,支持 Number、Vector、Quaternion、Color、Boolean、String 等 KeyframeTrack,可设置线性、平滑、离散插值;AnimationMixer 作用于根对象及后代,需在动画循环中调用 mixer.update(delta),可监听 finished 与 loop 事件;AnimationAction 控制播放、时间缩放、权重、循环模式(LoopRepeat/LoopOnce/LoopPingPong)、clampWhenFinished、淡入淡出与 crossFadeTo 交叉淡化;支持 Normal 与 Additive 混合模式实现加权混合与叠加层;通过 GLTFLoader 加载模型并用 gltf.animations 获取剪辑,按名称用 AnimationClip.findByName 播放;可访问 SkinnedMesh 的 skeleton 与 bones,做程序化骨骼动画或把对象挂到骨骼上;可读写 morphTargetInfluences 和 morphTargetDictionary 驱动形变目标;AnimationUtils 提供 subclip、makeClipAdditive 等工具;另有平滑阻尼、弹簧与正弦振荡等程序化动画模式。

使用方式:从 three 导入模块,创建 Clip 与 Mixer,生成 Action 后 play(),并在 requestAnimationFrame 循环中按 delta 更新 mixer。加载 GLTF 时先用 GLTFLoader 加载,再创建 AnimationMixer。

适用场景:角色行走/奔跑切换、表情形变、循环与单次动画、程序化起伏或环绕运动。

限制:需自行管理时钟与更新循环;每个 mixer.update 有开销,应限制活动 mixer 数量、对不可见对象暂停或在离屏时停止更新;具体平台与收费信息暂未提供。