three.js AnimationClipCreator程序化生成标准动画 Clip 的工厂方法完全指南【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js在 three.js 中AnimationClip通常由 GLTF、FBX 等加载器从模型文件中解析得到但很多场景UI 动效、程序化演示、无模型资产的交互反馈只需要“转一圈”“抖一下”“闪烁一下”这类标准动画。Addons 中的工具类AnimationClipCreator就是为此设计的它提供一组静态工厂方法按参数直接构造出可被AnimationMixer播放的AnimationClip无需任何外部资源。本文基于 AnimationClipCreator 文档页 与 实现源码完整覆盖 6 个工厂方法的参数、生成的关键帧结构、底层 Track 类型以及配套AnimationMixer的播放方案。定位一个只含静态工厂方法的工具类AnimationClipCreator位于 examples/jsm/animation/AnimationClipCreator.js属于 Addon 而非核心库。源码中类注释标注了hideconstructor意味着它不提供实例化入口全部能力都由 6 个静态方法承载工厂方法生成的关键帧轨道绑定的对象属性Track 类型CreateRotationAnimation.rotation[x\|y\|z]欧拉角分量度NumberKeyframeTrackCreateScaleAxisAnimation.scale[x\|y\|z]缩放分量NumberKeyframeTrackCreateShakeAnimation.position位置VectorKeyframeTrackCreatePulsationAnimation.scale缩放三轴等值VectorKeyframeTrackCreateVisibilityAnimation.visible可见性BooleanKeyframeTrackCreateMaterialColorAnimation.material.color材质颜色ColorKeyframeTrack从源码结构看每个方法的实现模式完全一致构造times与values两个数组 → 用对应类型的KeyframeTrack子类封装 → 返回new AnimationClip( , duration, [ track ] )。注意生成的 clip名称固定为空字符串如需在多个 clip 中检索例如AnimationClip.findByName应在使用前自行赋值clip.name。引入方式该模块必须显式导入。文档给出的标准写法是import { AnimationClipCreator } from three/addons/animation/AnimationClipCreator.js;此外它也被 examples/jsm/Addons.js 统一再导出export * from ./animation/AnimationClipCreator.js;因此通过three/addons/Addons.js聚合导入同样可用。需要按仓库的 Addons 安装说明配置three/addons路径别名Node 环境为three/addons/子路径浏览器端通常经打包器解析。六个工厂方法详解CreateRotationAnimation(period, axis x)static CreateRotationAnimation( period, axis x ) { const times [ 0, period ], values [ 0, 360 ]; const trackName .rotation[ axis ]; const track new NumberKeyframeTrack( trackName, times, values ); return new AnimationClip( , period, [ track ] ); }生成一个在period秒内绕指定轴旋转 360 度的 clip仅含两个关键帧0 度 → 360 度线性插值即匀速旋转。三个要点值得注意单位是角度。轨道绑定的是Object3D.rotationEuler其分量单位为度而非弧度所以values直接写[0, 360]axis默认x取值x | y | z最终拼成绑定名如.rotation[y]PropertyBinding会定位到rotation.y轨道只有两个关键帧播放时LoopRepeat模式下 0 与 360 等价衔接无跳变。CreateScaleAxisAnimation(period, axis x)实现与旋转方法几乎同构把轨道换成.scale[axis]、关键帧值换成[0, 1]const times [ 0, period ], values [ 0, 1 ]; const trackName .scale[ axis ];效果是沿指定轴从完全压扁0生长到原尺寸1常用于“展开”动效。注意这是绝对值插值如果对象原始scale.x不是 1动画会把该轴强制从 0 推到 1动画期间会覆盖你设置的初始缩放。axis默认x。CreatePulsationAnimation(duration, pulseScale)模拟“脉动”缩放实现上按10 个关键帧/秒采样随机值for ( let i 0; i duration * 10; i ) { times.push( i / 10 ); const scaleFactor Math.random() * pulseScale; tmp.set( scaleFactor, scaleFactor, scaleFactor ).toArray( values, values.length ); }pulseScale是缩放上限每个采样点的三轴缩放都取同一个[0, pulseScale]区间内的随机数轨道名为.scale整向量关键帧之间默认线性插值随机采样 线性过渡共同形成不规则的“跳动”感由于使用Math.random()每次调用生成的关键帧序列都不同。若需要可复现的动画生成后应保存关键帧或用固定随机数种子替代。CreateShakeAnimation(duration, shakeScale)模拟“抖动”位移同样以 10 关键帧/秒采样但每个轴独立取随机值tmp.set( Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0 ) .multiply( shakeScale ) .toArray( values, values.length );shakeScale是Vector3类型的幅度参数分别控制 x/y/z 三个方向的抖动范围实际位移落在[-shakeScale, shakeScale]区间内轨道绑定.position即直接改写对象的世界/本地位置——使用前需确认对象位置由动画独占控制避免与其他位移逻辑叠加与脉动一样关键帧随机生成、每次调用结果不同。CreateVisibilityAnimation(duration)const times [ 0, duration / 2, duration ], values [ true, false, true ]; const track new BooleanKeyframeTrack( .visible, times, values );生成一个“显示 → 隐藏 → 显示”的三关键帧循环配合LoopRepeat即得到规律闪烁。从 BooleanKeyframeTrack 源码 看该轨道类型DefaultInterpolation InterpolateDiscrete且 Linear/Smooth 插值工厂被置为undefined——布尔值只能离散切换不存在渐变过程因此在duration / 2时刻visible会瞬间由true变false。CreateMaterialColorAnimation(duration, colors)唯一接受自定义关键帧值的方法让材质颜色按colors数组顺序过渡const timeStep ( colors.length 1 ) ? duration / ( colors.length - 1 ) : 0; // times: 0, timeStep, 2*timeStep, ... // values: 依次 push 每个 Color 的 r, g, b const track new ColorKeyframeTrack( .material.color, times, values );colors是three的Color实例数组轨道关键帧均匀分布在[0, duration]内轨道名.material.color由PropertyBinding解析为“对象的 material 属性的 color 属性”即只影响对象主材质mesh.material.colorColorKeyframeTrack 继承默认线性插值颜色在RGB 分量空间内线性过渡而非 HSL 等感知均匀空间传入数组少于 2 个颜色时timeStep为 0所有关键帧挤在时间 0 上实际不会看到过渡效果——调用时至少传 2 个颜色才有意义。与 AnimationMixer 配合播放生成的 clip 是标准AnimationClip构造细节见 src/animation/AnimationClip.js接入方式与其他 clip 完全一致import * as THREE from three; import { AnimationClipCreator } from three/addons/animation/AnimationClipCreator.js; const mesh new THREE.Mesh( geometry, material ); const mixer new THREE.AnimationMixer( mesh ); // 绕 Y 轴 3 秒转一圈循环播放 const spin AnimationClipCreator.CreateRotationAnimation( 3, y ); spin.name spin; // clip 默认名为空建议命名便于管理 mixer.clipAction( spin ).play(); // 同时叠加一次性的抖动2 秒x/z 方向幅度 0.2y 方向 0 const shake AnimationClipCreator.CreateShakeAnimation( 2, new THREE.Vector3( 0.2, 0, 0.2 ) ); const shakeAction mixer.clipAction( shake ); shakeAction.setLoop( THREE.LoopOnce, 1 ); shakeAction.clampWhenFinished true; shakeAction.play(); // 每个渲染帧必须推进 mixer renderer.setAnimationLoop( ( delta ) { mixer.update( delta ); renderer.render( scene, camera ); } );几个与上述 clip 直接相关的实践点同一 mixer 可并行多个 action旋转、脉动、颜色、闪烁各绑定不同属性rotation/scale/material.color/visible互不冲突但CreateShakeAnimation与CreatePulsationAnimation若同时作用于.position之外的重叠属性需自行权衡权重action.setEffectiveWeight随机类 clip 的重播差异CreateShakeAnimation/CreatePulsationAnimation的关键帧在创建时已固化setLoop( THREE.LoopRepeat )循环播放时轨迹是稳定的只有再次调用工厂方法才会得到新的随机序列clip 名与检索AnimationClipCreator生成的 clip 名为若后续要用AnimationClip.findByName( clips, spin )之类逻辑务必像示例那样手动补名。适用边界小结AnimationClipCreator面向的是无资产依赖的标准动效旋转、生长、脉动、抖动、闪烁、变色。它的每个方法都只生成单轨道、绑定单个属性且参数语义与关键帧结构在源码中一一对应见上文表格便于在调试器中对照AnimationAction的轨道状态排查问题。超出这些模式的复杂动画骨骼、多轨道、自定义插值仍应手动组合KeyframeTrack子类或使用AnimationClip.parse/create( )静态接口自行构造——理解本工具的六个方法本身就是掌握 three.js 关键帧体系的最小样板。相关仓库文件文档页、实现源码、AnimationClip、Addons 聚合导出、BooleanKeyframeTrack、ColorKeyframeTrack。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
three.js AnimationClipCreator：程序化生成标准动画 Clip 的工厂方法完全指南
three.js AnimationClipCreator程序化生成标准动画 Clip 的工厂方法完全指南【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js在 three.js 中AnimationClip通常由 GLTF、FBX 等加载器从模型文件中解析得到但很多场景UI 动效、程序化演示、无模型资产的交互反馈只需要“转一圈”“抖一下”“闪烁一下”这类标准动画。Addons 中的工具类AnimationClipCreator就是为此设计的它提供一组静态工厂方法按参数直接构造出可被AnimationMixer播放的AnimationClip无需任何外部资源。本文基于 AnimationClipCreator 文档页 与 实现源码完整覆盖 6 个工厂方法的参数、生成的关键帧结构、底层 Track 类型以及配套AnimationMixer的播放方案。定位一个只含静态工厂方法的工具类AnimationClipCreator位于 examples/jsm/animation/AnimationClipCreator.js属于 Addon 而非核心库。源码中类注释标注了hideconstructor意味着它不提供实例化入口全部能力都由 6 个静态方法承载工厂方法生成的关键帧轨道绑定的对象属性Track 类型CreateRotationAnimation.rotation[x\|y\|z]欧拉角分量度NumberKeyframeTrackCreateScaleAxisAnimation.scale[x\|y\|z]缩放分量NumberKeyframeTrackCreateShakeAnimation.position位置VectorKeyframeTrackCreatePulsationAnimation.scale缩放三轴等值VectorKeyframeTrackCreateVisibilityAnimation.visible可见性BooleanKeyframeTrackCreateMaterialColorAnimation.material.color材质颜色ColorKeyframeTrack从源码结构看每个方法的实现模式完全一致构造times与values两个数组 → 用对应类型的KeyframeTrack子类封装 → 返回new AnimationClip( , duration, [ track ] )。注意生成的 clip名称固定为空字符串如需在多个 clip 中检索例如AnimationClip.findByName应在使用前自行赋值clip.name。引入方式该模块必须显式导入。文档给出的标准写法是import { AnimationClipCreator } from three/addons/animation/AnimationClipCreator.js;此外它也被 examples/jsm/Addons.js 统一再导出export * from ./animation/AnimationClipCreator.js;因此通过three/addons/Addons.js聚合导入同样可用。需要按仓库的 Addons 安装说明配置three/addons路径别名Node 环境为three/addons/子路径浏览器端通常经打包器解析。六个工厂方法详解CreateRotationAnimation(period, axis x)static CreateRotationAnimation( period, axis x ) { const times [ 0, period ], values [ 0, 360 ]; const trackName .rotation[ axis ]; const track new NumberKeyframeTrack( trackName, times, values ); return new AnimationClip( , period, [ track ] ); }生成一个在period秒内绕指定轴旋转 360 度的 clip仅含两个关键帧0 度 → 360 度线性插值即匀速旋转。三个要点值得注意单位是角度。轨道绑定的是Object3D.rotationEuler其分量单位为度而非弧度所以values直接写[0, 360]axis默认x取值x | y | z最终拼成绑定名如.rotation[y]PropertyBinding会定位到rotation.y轨道只有两个关键帧播放时LoopRepeat模式下 0 与 360 等价衔接无跳变。CreateScaleAxisAnimation(period, axis x)实现与旋转方法几乎同构把轨道换成.scale[axis]、关键帧值换成[0, 1]const times [ 0, period ], values [ 0, 1 ]; const trackName .scale[ axis ];效果是沿指定轴从完全压扁0生长到原尺寸1常用于“展开”动效。注意这是绝对值插值如果对象原始scale.x不是 1动画会把该轴强制从 0 推到 1动画期间会覆盖你设置的初始缩放。axis默认x。CreatePulsationAnimation(duration, pulseScale)模拟“脉动”缩放实现上按10 个关键帧/秒采样随机值for ( let i 0; i duration * 10; i ) { times.push( i / 10 ); const scaleFactor Math.random() * pulseScale; tmp.set( scaleFactor, scaleFactor, scaleFactor ).toArray( values, values.length ); }pulseScale是缩放上限每个采样点的三轴缩放都取同一个[0, pulseScale]区间内的随机数轨道名为.scale整向量关键帧之间默认线性插值随机采样 线性过渡共同形成不规则的“跳动”感由于使用Math.random()每次调用生成的关键帧序列都不同。若需要可复现的动画生成后应保存关键帧或用固定随机数种子替代。CreateShakeAnimation(duration, shakeScale)模拟“抖动”位移同样以 10 关键帧/秒采样但每个轴独立取随机值tmp.set( Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0 ) .multiply( shakeScale ) .toArray( values, values.length );shakeScale是Vector3类型的幅度参数分别控制 x/y/z 三个方向的抖动范围实际位移落在[-shakeScale, shakeScale]区间内轨道绑定.position即直接改写对象的世界/本地位置——使用前需确认对象位置由动画独占控制避免与其他位移逻辑叠加与脉动一样关键帧随机生成、每次调用结果不同。CreateVisibilityAnimation(duration)const times [ 0, duration / 2, duration ], values [ true, false, true ]; const track new BooleanKeyframeTrack( .visible, times, values );生成一个“显示 → 隐藏 → 显示”的三关键帧循环配合LoopRepeat即得到规律闪烁。从 BooleanKeyframeTrack 源码 看该轨道类型DefaultInterpolation InterpolateDiscrete且 Linear/Smooth 插值工厂被置为undefined——布尔值只能离散切换不存在渐变过程因此在duration / 2时刻visible会瞬间由true变false。CreateMaterialColorAnimation(duration, colors)唯一接受自定义关键帧值的方法让材质颜色按colors数组顺序过渡const timeStep ( colors.length 1 ) ? duration / ( colors.length - 1 ) : 0; // times: 0, timeStep, 2*timeStep, ... // values: 依次 push 每个 Color 的 r, g, b const track new ColorKeyframeTrack( .material.color, times, values );colors是three的Color实例数组轨道关键帧均匀分布在[0, duration]内轨道名.material.color由PropertyBinding解析为“对象的 material 属性的 color 属性”即只影响对象主材质mesh.material.colorColorKeyframeTrack 继承默认线性插值颜色在RGB 分量空间内线性过渡而非 HSL 等感知均匀空间传入数组少于 2 个颜色时timeStep为 0所有关键帧挤在时间 0 上实际不会看到过渡效果——调用时至少传 2 个颜色才有意义。与 AnimationMixer 配合播放生成的 clip 是标准AnimationClip构造细节见 src/animation/AnimationClip.js接入方式与其他 clip 完全一致import * as THREE from three; import { AnimationClipCreator } from three/addons/animation/AnimationClipCreator.js; const mesh new THREE.Mesh( geometry, material ); const mixer new THREE.AnimationMixer( mesh ); // 绕 Y 轴 3 秒转一圈循环播放 const spin AnimationClipCreator.CreateRotationAnimation( 3, y ); spin.name spin; // clip 默认名为空建议命名便于管理 mixer.clipAction( spin ).play(); // 同时叠加一次性的抖动2 秒x/z 方向幅度 0.2y 方向 0 const shake AnimationClipCreator.CreateShakeAnimation( 2, new THREE.Vector3( 0.2, 0, 0.2 ) ); const shakeAction mixer.clipAction( shake ); shakeAction.setLoop( THREE.LoopOnce, 1 ); shakeAction.clampWhenFinished true; shakeAction.play(); // 每个渲染帧必须推进 mixer renderer.setAnimationLoop( ( delta ) { mixer.update( delta ); renderer.render( scene, camera ); } );几个与上述 clip 直接相关的实践点同一 mixer 可并行多个 action旋转、脉动、颜色、闪烁各绑定不同属性rotation/scale/material.color/visible互不冲突但CreateShakeAnimation与CreatePulsationAnimation若同时作用于.position之外的重叠属性需自行权衡权重action.setEffectiveWeight随机类 clip 的重播差异CreateShakeAnimation/CreatePulsationAnimation的关键帧在创建时已固化setLoop( THREE.LoopRepeat )循环播放时轨迹是稳定的只有再次调用工厂方法才会得到新的随机序列clip 名与检索AnimationClipCreator生成的 clip 名为若后续要用AnimationClip.findByName( clips, spin )之类逻辑务必像示例那样手动补名。适用边界小结AnimationClipCreator面向的是无资产依赖的标准动效旋转、生长、脉动、抖动、闪烁、变色。它的每个方法都只生成单轨道、绑定单个属性且参数语义与关键帧结构在源码中一一对应见上文表格便于在调试器中对照AnimationAction的轨道状态排查问题。超出这些模式的复杂动画骨骼、多轨道、自定义插值仍应手动组合KeyframeTrack子类或使用AnimationClip.parse/create( )静态接口自行构造——理解本工具的六个方法本身就是掌握 three.js 关键帧体系的最小样板。相关仓库文件文档页、实现源码、AnimationClip、Addons 聚合导出、BooleanKeyframeTrack、ColorKeyframeTrack。【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考