Three.js API手册

动画
AnimationAction AnimationClip AnimationMixer AnimationObjectGroup AnimationUtils KeyframeTrack PropertyBinding PropertyMixer
动画 / 轨道
BooleanKeyframeTrack ColorKeyframeTrack NumberKeyframeTrack QuaternionKeyframeTrack StringKeyframeTrack VectorKeyframeTrack
音频
Audio AudioAnalyser AudioContext AudioListener PositionalAudio
摄像机
ArrayCamera Camera CubeCamera OrthographicCamera PerspectiveCamera StereoCamera
常量
Animation Core CustomBlendingEquation DrawModes Materials Renderer Textures
核心
BufferAttribute BufferGeometry Clock DirectGeometry EventDispatcher Face3 Geometry InstancedBufferAttribute InstancedBufferGeometry InstancedInterleavedBuffer InterleavedBuffer InterleavedBufferAttribute Layers Object3D Raycaster Uniform
核心 / BufferAttributes
BufferAttribute_Types
弃用列表
DeprecatedList
附件
Earcut ShapeUtils
附件 / 核心
Curve CurvePath Font Interpolations Path Shape ShapePath
附件 / 曲线
ArcCurve CatmullRomCurve3 CubicBezierCurve CubicBezierCurve3 EllipseCurve LineCurve LineCurve3 QuadraticBezierCurve QuadraticBezierCurve3 SplineCurve
附件 / 物体
ImmediateRenderObject
几何体
BoxBufferGeometry BoxGeometry CircleBufferGeometry CircleGeometry ConeBufferGeometry ConeGeometry CylinderBufferGeometry CylinderGeometry DodecahedronBufferGeometry DodecahedronGeometry EdgesGeometry ExtrudeBufferGeometry ExtrudeGeometry IcosahedronBufferGeometry IcosahedronGeometry LatheBufferGeometry LatheGeometry OctahedronBufferGeometry OctahedronGeometry ParametricBufferGeometry ParametricGeometry PlaneBufferGeometry PlaneGeometry PolyhedronBufferGeometry PolyhedronGeometry RingBufferGeometry RingGeometry ShapeBufferGeometry ShapeGeometry SphereBufferGeometry SphereGeometry TetrahedronBufferGeometry TetrahedronGeometry TextBufferGeometry TextGeometry TorusBufferGeometry TorusGeometry TorusKnotBufferGeometry TorusKnotGeometry TubeBufferGeometry TubeGeometry WireframeGeometry
辅助对象
ArrowHelper AxesHelper BoxHelper Box3Helper CameraHelper DirectionalLightHelper FaceNormalsHelper GridHelper PolarGridHelper PositionalAudioHelper HemisphereLightHelper PlaneHelper PointLightHelper RectAreaLightHelper SkeletonHelper SpotLightHelper VertexNormalsHelper
灯光
AmbientLight DirectionalLight HemisphereLight Light PointLight RectAreaLight SpotLight
灯光 / 阴影
DirectionalLightShadow LightShadow SpotLightShadow
加载器
AnimationLoader AudioLoader BufferGeometryLoader Cache CompressedTextureLoader CubeTextureLoader DataTextureLoader FileLoader FontLoader ImageBitmapLoader ImageLoader Loader LoaderUtils MaterialLoader ObjectLoader TextureLoader
加载器 / 管理器
DefaultLoadingManager LoadingManager
材质
LineBasicMaterial LineDashedMaterial Material MeshBasicMaterial MeshDepthMaterial MeshDistanceMaterial MeshLambertMaterial MeshMatcapMaterial MeshNormalMaterial MeshPhongMaterial MeshPhysicalMaterial MeshStandardMaterial MeshToonMaterial PointsMaterial RawShaderMaterial ShaderMaterial ShadowMaterial SpriteMaterial
数学库
Box2 Box3 Color Cylindrical Euler Frustum Interpolant Line3 Math Matrix3 Matrix4 Plane Quaternion Ray Sphere Spherical Triangle Vector2 Vector3 Vector4
数学库 / 插值
CubicInterpolant DiscreteInterpolant LinearInterpolant QuaternionLinearInterpolant
物体
Bone Group Line LineLoop LineSegments LOD Mesh Points Skeleton SkinnedMesh Sprite
渲染器
WebGLMultisampleRenderTarget WebGLRenderer WebGLRenderTarget WebGLRenderTargetCube
渲染器 / 着色器
ShaderChunk ShaderLib UniformsLib UniformsUtils
场景
Fog FogExp2 Scene
纹理贴图
CanvasTexture CompressedTexture CubeTexture DataTexture DataTexture3D DepthTexture Texture VideoTexture
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

KeyframeTrack

关键帧轨道(KeyframeTrack)是关键帧(keyframes)的定时序列, 它由时间和相关值的列表组成, 用来让一个对象的某个特定属性动起来。

在使用手册的“下一步”章节中,“动画系统”一文对three.js动画系统中的不同元素作出了概述

JSON model format的动画层级相反, 关键帧轨道(KeyframeTrack)不会将单帧作为对象存储在“key”数组(一个存有每一帧的时间和值的地方)中。

关键帧轨道(KeyframeTrack)中总是存在两个数组:times数组按顺序存储该轨道的所有关键帧的时间值,而values数组包含动画属性的相应更改值。

值数组中的每一个成员,属于某一特定时间点,不仅可以是一个简单的数字,还可以是(比如)一个向量(如果是位置动画)或者是一个四元数(如果是旋转动画)。 因此,值数组(也是一个平面阵列)的长度可能是时间数组的三四倍。

与不同类型的动画值对应,存在若干关键帧轨道(KeyframeTrack)的子类,继承了它大多数属性和方法:

  • BooleanKeyframeTrack
  • ColorKeyframeTrack
  • NumberKeyframeTrack
  • QuaternionKeyframeTrack
  • StringKeyframeTrack
  • VectorKeyframeTrack

可以在AnimationClipCreator文件中找到用不同类型的关键帧轨道创建动画剪辑(AnimationClips)的示例。

由于显式值仅针对存储在时间数组中的离散时间点指定,因此必须在两个时间点之间进行插值

轨道的名称对于这个轨道与动画节点的特定属性的连接(由PropertyBinding完成)很重要。

构造器

KeyframeTrack( name : String, times : Array, values : Array, interpolation : Constant )

name - 关键帧轨道(KeyframeTrack)的标识符.
times - 关键帧的时间数组, 被内部转化为 Float32Array.
values - 与时间数组中的时间点相关的值组成的数组, 被内部转化为 Float32Array.
interpolation - 使用的插值类型。 参见 Animation Constants for possible values. Default is InterpolateLinear.

属性

# .name : String

轨道的名称可以指动画对象中的变形目标(morph targets)、骨骼(bones)或可能的其他值 查看PropertyBinding.parseTrackName可获知哪些形式的字符串可以解析出绑定的属性:

可以使用节点名称或uuid(尽管它需要位于传递到混合器的场景图节点的子树中)引用到某节点。或者, 如果轨道名称的首字符是点, 该轨道会应用到传入到混合器的根节点上。

通常,在该节点之后会直接指定一个属性。 但是也可以再指定一个子属性, 例如 如果只是想通过浮动轨道使X组件旋转,可使用 .rotation[x]。

还可以使用对象名称来指定骨骼或多材质,例如:.bones[R_hand].scale;再比如,材料数组中的第四个材料的漫反射颜色的红通道可以通过 .materials[3].diffuse[r]访问到。

属性绑定也会解析变形目标名称, 例如: .morphTargetInfluences[run]

说明: 轨道名称不一定得唯一。 多个轨道可驱动统一属性, 此时结果应该基于多个轨道之间根据其各自动作的权重的加权混合。

# .times : Float32Array

一个Float32Array类型的值,由传入构造器中时间数组参数转化而来。

# .values : Float32Array

一个Float32Array类型的值, 由传入构造器中值数组参数转化而来

# .DefaultInterpolation : Constant

默认的参数插值类型: InterpolateLinear.

# .TimeBufferType : Constant

Float32Array, 内部用于时间数组的缓冲区的类型

# .ValueBufferType : Constant

Float32Array, 内部用于值数组的缓冲区的类型

方法

# .clone () : KeyframeTrack

# .createInterpolant () : null

根据传入构造器中的插值类型参数,创建线性插值(LinearInterpolant),立方插值(CubicInterpolant)或离散插值 (DiscreteInterpolant)

# .getInterpolation () : null

返回插值类型

# .getValueSize () : Number

返回每个值的大小(即values数组的长度除以times数组的长度

# .InterpolantFactoryMethodDiscrete ( result ) : DiscreteInterpolant

根据时间(times)和值(values)创建一个新的离散插值(DiscreteInterpolant)。 可传入一个Float32Array类型的变量来接收结果, 否则会自动创建一个长度适宜的新数组。

# .InterpolantFactoryMethodLinear ( result ) : null

根据时间(times)和值(values)创建一个新的线性插值(LinearInterpolant)。 可传入一个Float32Array类型的变量来接收结果, 否则会自动创建一个长度适宜的新数组。

# .InterpolantFactoryMethodSmooth ( result ) : null

根据时间(times)和值(values)创建一个新的立方插值(CubicInterpolant)。 可传入一个Float32Array类型的变量来接收结果, 否则会自动创建一个长度适宜的新数组。

# .optimize () : this

删除等效的顺序键,这些键在变形目标序列中很常见。

# .scale () : this

缩放所有关键帧的时间。

说明: 这个方法很有用,例如, 可用于转化为某一特定帧率(正如animationClip.CreateFromMorphTargetSequence内部所做的一样)。

# .setInterpolation ( interpolationType : Constant ) : this

设置插值类型。 参阅Animation Constants以供选择。

# .shift ( timeOffsetInSeconds : Number ) : this

及时删除之前或之后的所有关键帧。

# .trim ( startTimeInSeconds : Number, endTimeInSeconds : Number ) : this

删除开始时间(startTime)之前以及结束时间(endTime)之后的关键帧,不改变[startTime, endTime]范围内的任何值。

# .validate () : Boolean

在轨道上执行最小验证,有效则返回true

如果出现以下情况,该方法会在控制台输出错误日志: 轨道为空; value size值不可靠; times数组或values数组中的元素不是数字;times数组中的元素乱序。

静态方法

# .parse ( json : JSON ) : KeyframeTrack

解析JSON对象并返回一个正确类型的新关键帧轨道。

# .toJSON ( track : KeyframeTrack ) : JSON

将该轨道转化为JSON

源码

src/animation/KeyframeTrack.js