VectorKeyframeTrackthree.js 矢量关键帧轨道完全指南【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js在 three.js 的动画系统中VectorKeyframeTrack是驱动位置position、缩放scale等矢量属性动画的核心轨道类型。本文基于 VectorKeyframeTrack 官方文档 与 源码实现系统讲解其构造函数、插值模式、底层原理、实战用法与完整方法集帮助你理解并构建基于矢量的关键帧动画。概述什么是 VectorKeyframeTrackVectorKeyframeTrack是 three.js 动画系统AnimationClip/AnimationMixer中用于存储和插值矢量关键帧值的轨道类型。它继承自 KeyframeTrack专门处理包含多个分量如三维向量的 x、y、z的动画数据。一个典型的应用场景是为对象的.position或.scale属性编写关键帧动画。例如让一个立方体在 0 秒位于原点、1 秒移动到 (10, 0, 0)就需要一个矢量轨道来记录这些位置变化。构造函数详解new VectorKeyframeTrack( name, times, values, interpolation )构造一个新的矢量关键帧轨道参数与父类KeyframeTrack完全一致参数类型说明namestring轨道的名称用于将轨道绑定到具体属性如.position详见 PropertyBinding 的轨道名解析timesArraynumber关键帧时间点列表秒如[0, 1, 2]valuesArraynumber关键帧值列表按时间点顺序连续排列interpolationInterpolateLinear|InterpolateDiscrete|InterpolateSmooth插值类型可选默认继承父类的InterpolateLinear关于 values 的格式矢量轨道默认按三维向量x, y, z处理因此 values 的长度必须是 times 长度的整数倍。例如两个关键帧times [0, 1]对应 values 应为[x0, y0, z0, x1, y1, z1]即 6 个数值。import * as THREE from three; // 创建一段位置动画0s 在 (0,0,0)1s 到 (10,0,0)2s 回到 (0,0,0) const positionTrack new THREE.VectorKeyframeTrack( .position, [ 0, 1, 2 ], [ 0, 0, 0, 10, 0, 0, 0, 0, 0 ], THREE.InterpolateLinear );父类构造校验构造函数内部会先执行两次安全检查见 KeyframeTrack.jsname未定义时抛出THREE.KeyframeTrack: track name is undefinedtimes未定义或为空时抛出THREE.KeyframeTrack: no keyframes in track named name。随后times与values会经 AnimationUtils.convertArray 转换为Float32Array由继承的TimeBufferType/ValueBufferType决定。核心属性.ValueTypeName : string标识轨道值类型的名称VectorKeyframeTrack覆写为vector源码 VectorKeyframeTrack.js。该值在 KeyframeTrack.toJSON 序列化时作为json.type输出供反序列化时重建对应轨道类型。继承自 KeyframeTrack 的属性VectorKeyframeTrack自身没有新增属性以下关键属性均从父类继承属性默认值说明.DefaultInterpolationInterpolateLinear默认插值类型见 KeyframeTrack.js.TimeBufferTypeFloat32Array时间数据缓冲类型.ValueBufferTypeFloat32Array值数据缓冲类型.name—轨道名如.position、.scale或变形目标名.times—关键帧时间点Float32Array.values—关键帧值Float32Array插值模式插值模式在构造函数第四个参数中指定常量定义于 src/constants.js常量值行为THREE.InterpolateDiscrete2300离散插值不做平滑过渡适用于瞬时切换THREE.InterpolateLinear2301线性插值默认在关键帧间直线过渡THREE.InterpolateSmooth2302平滑三次样条插值曲线更圆滑THREE.InterpolateBezier2303贝塞尔插值需在track.settings中提供切线数据底层插值器工厂VectorKeyframeTrack直接复用父类的三个工厂方法KeyframeTrack.js分别创建DiscreteInterpolant、LinearInterpolant与CubicInterpolant而setInterpolation()负责把工厂方法挂到createInterpolant上。如果传入了不支持的插值类型会回退到默认插值并输出警告unsupported interpolation for vector keyframe track named ...KeyframeTrack.js。对比四元数轨道QuaternionKeyframeTrack覆写了线性插值工厂以使用QuaternionLinearInterpolant并禁用了平滑插值QuaternionKeyframeTrack.js而VectorKeyframeTrack对三种插值全量支持无需覆写。与动画系统协作完整实战示例VectorKeyframeTrack通常不单独使用而是被包装进AnimationClip由AnimationMixer驱动播放。以下是一个完整示例import * as THREE from three; const mesh new THREE.Mesh( new THREE.BoxGeometry(), new THREE.MeshStandardMaterial() ); // 1. 创建矢量轨道位置动画线性与缩放动画离散 const positionTrack new THREE.VectorKeyframeTrack( .position, [ 0, 1, 2 ], [ 0, 0, 0, 10, 0, 0, 0, 0, 0 ], THREE.InterpolateLinear ); const scaleTrack new THREE.VectorKeyframeTrack( .scale, [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ], THREE.InterpolateDiscrete ); // 2. 打包为动画剪辑 const clip new THREE.AnimationClip( move, 2, [ positionTrack, scaleTrack ] ); // 3. 交给混合器播放 const mixer new THREE.AnimationMixer( mesh ); const action mixer.clipAction( clip ); action.play(); // 4. 在渲染循环中更新 function animate( clock ) { mixer.update( clock.getDelta() ); renderer.render( scene, camera ); }继承自 KeyframeTrack 的完整方法集VectorKeyframeTrack可直接使用父类的全部实例方法与静态方法实现均在 KeyframeTrack.js方法说明setInterpolation( type )设置插值类型并返回this链式调用getInterpolation()返回当前插值类型getValueSize()返回值分量数values.length / times.length矢量轨道通常为 3shift( timeOffset )将所有关键帧时间平移timeOffset秒返回thisscale( timeScale )将所有关键帧时间缩放timeScale倍常用于帧率与秒的换算返回thistrim( startTime, endTime )裁剪掉时间范围外的关键帧并保证至少保留一个关键帧返回thisvalidate()校验轨道数据值大小是否为整数、时间是否合法、键序是否升序、值是否含 NaN返回布尔值optimize()移除相邻的等价关键帧对形态目标动画常见进行就地压缩返回thisclone()复制关键帧数据并返回新的同类型轨道toJSON( track )静态方法序列化为 JSONtype字段即ValueTypeNameInterpolantFactoryMethodDiscrete/Linear/Smooth/Bezier各插值器的工厂方法单元测试验证仓库为VectorKeyframeTrack提供了独立的单元测试 test/unit/src/animation/tracks/VectorKeyframeTrack.tests.js覆盖了两个核心断言继承关系new VectorKeyframeTrack(...) instanceof KeyframeTrack为true验证其正确继承自基类实例化支持name times values三参数与name times values interpolation四参数两种构造方式。测试中的示例参数name: .force、times: [0]、values: [0.5, 0.5, 0.5]也印证了矢量轨道的典型数据形态——一个时间点对应三个分量值。使用建议与注意事项values 长度务必保证values.length times.length * 3三维向量场景否则validate()会报告 Invalid value size。时间单调性times必须按升序排列乱序数据会被validate()识别为 Out of order keys。默认插值不传interpolation时使用线性插值InterpolateLinear绝大多数位移动画够用需要平滑曲线时使用InterpolateSmooth需要瞬间切换如隐藏/显示时使用InterpolateDiscrete。序列化往返toJSON()输出的type: vector字段是反序列化时重建VectorKeyframeTrack的关键标识KeyframeTrack.js。配合其他轨道将矢量轨道位置/缩放、四元数轨道旋转QuaternionKeyframeTrack与数值轨道透明度等NumberKeyframeTrack组合进同一个AnimationClip即可构建完整的骨骼/对象动画。相关资源轨道基类KeyframeTrack 文档 与 源码兄弟轨道QuaternionKeyframeTrack、NumberKeyframeTrack、ColorKeyframeTrack、BooleanKeyframeTrack、StringKeyframeTrack均位于src/animation/tracks/目录轨道解析与绑定PropertyBinding播放系统AnimationMixer、AnimationClip单元测试VectorKeyframeTrack.tests.js【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考