SuperAPI AI 工具集

threejs-animation

设计与创作

查看项目

更新于 10-16 06:42

技能介绍

用途:Three.js 动画系统,用于在 Three.js 中为对象制作动画、播放 GLTF 自带动画、驱动骨骼与变形目标,并实现多动画混合。

主要能力:动画系统由 AnimationClip(关键帧数据容器)、AnimationMixer(在根对象上播放动画)、AnimationAction(控制单个片段播放)三部分组成。关键帧轨道支持 Number、Vector、Quaternion、Color、Boolean、String 类型,插值模式含线性、平滑与离散。AnimationAction 可控制播放、停止、重置、暂停、时间缩放、权重、循环模式(LoopRepeat/LoopOnce/LoopPingPong)、clampWhenFinished 与混合模式,并支持 fadeIn/fadeOut 与 crossFadeTo 交叉淡入淡出。可用 GLTFLoader 加载 glb 模型,通过 gltf.animations 获取片段,THREE.AnimationClip.findByName 按名查找。支持骨骼操作(SkeletonHelper、按名查找骨骼、骨骼挂载物体)与 morphTargetInfluences / morphTargetDictionary 控制变形目标。动画混合包括按速度调整权重与 Additive 加法混合(THREE.AnimationUtils.makeClipAdditive)。还提供 subclip、clone、optimize、resetDuration 等工具,以及平滑阻尼、弹簧物理、正弦/圆周/8 字运动等过程动画模式。

使用方式:创建 mixer 后,在动画循环中每帧调用 mixer.update(delta),并用 clock.getDelta() 取增量;示例导入路径为 "three" 与 "three/examples/jsm/loaders/GLTFLoader.js"。

适用场景:对象过程动画、GLTF 骨骼动画播放、角色多动画混合、变形目标表情控制。

限制:资料未提供安装命令、收费与平台信息,暂未提供。