KeyframeTrack.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p class="desc">
  12. A KeyframeTrack is a timed sequence of
  13. [link:https://en.wikipedia.org/wiki/Key_frame keyframes], which are
  14. composed of lists of times and related values, and which are used to
  15. animate a specific property of an object.
  16. </p>
  17. <p>
  18. For an overview of the different elements of the three.js animation system
  19. see the "Animation System" article in the "Next Steps" section of the
  20. manual.
  21. </p>
  22. <p>
  23. In contrast to the animation hierarchy of the
  24. [link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format] a `KeyframeTrack` doesn't store its single keyframes as
  25. objects in a "keys" array (holding the times and the values for each frame
  26. together in one place).
  27. </p>
  28. <p>
  29. Instead of this there are always two arrays in a `KeyframeTrack`: the
  30. [page:.times times] array stores the time values for all keyframes of this
  31. track in sequential order, and the [page:.values values] array contains
  32. the corresponding changing values of the animated property.
  33. </p>
  34. <p>
  35. A single value, belonging to a certain point of time, can not only be a
  36. simple number, but (for example) a vector (if a position is animated) or a
  37. quaternion (if a rotation is animated). For this reason the values array
  38. (which is a flat array, too) might be three or four times as long as the
  39. times array.
  40. </p>
  41. <p>
  42. Corresponding to the different possible types of animated values there are
  43. several subclasses of `KeyframeTrack`, inheriting the most properties and
  44. methods:
  45. </p>
  46. <ul>
  47. <li>[page:BooleanKeyframeTrack]</li>
  48. <li>[page:ColorKeyframeTrack]</li>
  49. <li>[page:NumberKeyframeTrack]</li>
  50. <li>[page:QuaternionKeyframeTrack]</li>
  51. <li>[page:StringKeyframeTrack]</li>
  52. <li>[page:VectorKeyframeTrack]</li>
  53. </ul>
  54. <p>
  55. Some examples of how to manually create [page:AnimationClip AnimationClips] with different sorts of KeyframeTracks can be found in the
  56. [link:https://threejs.org/examples/jsm/animation/AnimationClipCreator.js AnimationClipCreator] file.
  57. </p>
  58. <p>
  59. Since explicit values are only specified for the discrete points of time
  60. stored in the times array, all values in between have to be interpolated.
  61. </p>
  62. <p>
  63. The track's name is important for the connection of this track with a
  64. specific property of the animated node (done by [page:PropertyBinding]).
  65. </p>
  66. <h2>Constructor</h2>
  67. <h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )
  68. </h3>
  69. <p>
  70. [page:String name] - the identifier for the `KeyframeTrack`.<br />
  71. [page:Array times] - an array of keyframe times, converted internally to a
  72. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
  73. [page:Array values] - an array with the values related to the times array,
  74. converted internally to a
  75. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
  76. [page:Constant interpolation] - the type of interpolation to use. See
  77. [page:Animation Animation Constants] for possible values. Default is
  78. [page:Animation InterpolateLinear].
  79. </p>
  80. <h2>Properties</h2>
  81. <h3>[property:String name]</h3>
  82. <p>
  83. The track's name can refer to morph targets or [page:SkinnedMesh bones] or
  84. possibly other values within an animated object. See
  85. [page:PropertyBinding.parseTrackName] for the forms of strings that can be
  86. parsed for property binding:
  87. </p>
  88. <p>
  89. The name can specify the node either using its name or its uuid (although
  90. it needs to be in the subtree of the scene graph node passed into the
  91. mixer). Or, if the track name starts with a dot, the track applies to the
  92. root node that was passed into the mixer.
  93. </p>
  94. <p>
  95. Usually after the node a property will be specified directly. But you can
  96. also specify a subproperty, such as .rotation[x], if you just want to
  97. drive the X component of the rotation via a float track.
  98. </p>
  99. <p>
  100. You can also specify bones or multimaterials by using an object name, for
  101. example: .bones[R_hand].scale; the red channel of the diffuse color of the
  102. fourth material in a materials array - as a further example - can be
  103. accessed with .materials[3].diffuse[r].
  104. </p>
  105. <p>
  106. PropertyBinding will also resolve morph target names, for example:
  107. .morphTargetInfluences[run].
  108. </p>
  109. <p>
  110. Note: The track's name does not necessarily have to be unique. Multiple
  111. tracks can drive the same property. The result should be based on a
  112. weighted blend between the multiple tracks according to the weights of
  113. their respective actions.
  114. </p>
  115. <h3>[property:Float32Array times]</h3>
  116. <p>
  117. A
  118. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array], converted from the times array which is passed in the
  119. constructor.
  120. </p>
  121. <h3>[property:Float32Array values]</h3>
  122. <p>
  123. A
  124. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array], converted from the values array which is passed in the
  125. constructor.
  126. </p>
  127. <h3>[property:Constant DefaultInterpolation]</h3>
  128. <p>The default interpolation type: [page:Animation InterpolateLinear].</p>
  129. <h3>[property:Constant TimeBufferType ]</h3>
  130. <p>
  131. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array], the type of the buffer internally used for the times.
  132. </p>
  133. <h3>[property:Constant ValueBufferType ]</h3>
  134. <p>
  135. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array], the type of the buffer internally used for the values.
  136. </p>
  137. <h2>Methods</h2>
  138. <h3>[method:KeyframeTrack clone]()</h3>
  139. <p>Returns a copy of this track.</p>
  140. <h3>[method:Interpolant createInterpolant]()</h3>
  141. <p>
  142. Creates a [page:LinearInterpolant LinearInterpolant],
  143. [page:CubicInterpolant CubicInterpolant] or [page:DiscreteInterpolant DiscreteInterpolant], depending on the value of the interpolation
  144. parameter passed in the constructor.
  145. </p>
  146. <h3>[method:Interpolant getInterpolation]()</h3>
  147. <p>Returns the interpolation type.</p>
  148. <h3>[method:Number getValueSize]()</h3>
  149. <p>
  150. Returns the size of each value (that is the length of the [page:.values values] array divided by the length of the [page:.times times] array).
  151. </p>
  152. <h3>
  153. [method:DiscreteInterpolant InterpolantFactoryMethodDiscrete]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )
  154. </h3>
  155. <p>
  156. Creates a new [page:DiscreteInterpolant DiscreteInterpolant] from the
  157. [page:KeyframeTrack.times times] and [page:KeyframeTrack.times values]. A
  158. Float32Array can be passed which will receive the results. Otherwise a new
  159. array with the appropriate size will be created automatically.
  160. </p>
  161. <h3>
  162. [method:LinearInterpolant InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )
  163. </h3>
  164. <p>
  165. Creates a new [page:LinearInterpolant LinearInterpolant] from the
  166. [page:KeyframeTrack.times times] and [page:KeyframeTrack.times values]. A
  167. Float32Array can be passed which will receive the results. Otherwise a new
  168. array with the appropriate size will be created automatically.
  169. </p>
  170. <h3>
  171. [method:CubicInterpolant InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )
  172. </h3>
  173. <p>
  174. Create a new [page:CubicInterpolant CubicInterpolant] from the
  175. [page:KeyframeTrack.times times] and [page:KeyframeTrack.times values]. A
  176. Float32Array can be passed which will receive the results. Otherwise a new
  177. array with the appropriate size will be created automatically.
  178. </p>
  179. <h3>[method:this optimize]()</h3>
  180. <p>
  181. Removes equivalent sequential keys, which are common in morph target
  182. sequences.
  183. </p>
  184. <h3>[method:this scale]()</h3>
  185. <p>
  186. Scales all keyframe times by a factor.<br /><br />
  187. Note: This is useful, for example, for conversions to a certain rate of
  188. frames per seconds (as it is done internally by
  189. [page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]).
  190. </p>
  191. <h3>
  192. [method:this setInterpolation]( [param:Constant interpolationType] )
  193. </h3>
  194. <p>
  195. Sets the interpolation type. See [page:Animation Animation Constants] for
  196. choices.
  197. </p>
  198. <h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
  199. <p>Moves all keyframes either forward or backward in time.</p>
  200. <h3>
  201. [method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )
  202. </h3>
  203. <p>
  204. Removes keyframes before `startTime` and after `endTime`, without changing
  205. any values within the range [`startTime`, `endTime`].
  206. </p>
  207. <h3>[method:Boolean validate]()</h3>
  208. <p>Performs minimal validation on the tracks. Returns true if valid.</p>
  209. <p>
  210. This method logs errors to the console, if a track is empty, if the
  211. [page:.valueSize value size] is not valid, if an item in the [page:.times times] or [page:.values values] array is not a valid number or if the
  212. items in the `times` array are out of order.
  213. </p>
  214. <h2>Static Methods</h2>
  215. <h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
  216. <p>Converts the track to JSON.</p>
  217. <h2>Source</h2>
  218. <p>
  219. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  220. </p>
  221. </body>
  222. </html>