1
0

KeyframeTrack.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <!DOCTYPE html>
  2. <html lang="fr">
  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. Un KeyframeTrack est une séquence chronométrée de [link:https://en.wikipedia.org/wiki/Key_frame keyframes],
  13. qui est composée de listes de durées et de valeurs connexes, qui sont utilisées pour animer
  14. une propriété spécifique d'un objet.
  15. </p>
  16. <p>
  17. Pour avoir un aperçu des différents éléments du système d'animation de three.js, consultez
  18. l'article "Système d'Animation" dans la section "Étapes Suivantes" du manuel.
  19. </p>
  20. <p>
  21. Contrairement à la hiérarchie d'animation du
  22. [link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format] un
  23. `KeyframeTrack` ne stocke pas ses keyframes comme étant des objets dans un tableau à "clés" (stockant
  24. les durées et les valeurs pour chaque frame ensemble à un même endroit).
  25. </p>
  26. <p>
  27. A la place, il y a toujours deux tableaux dans un `KeyframeTrack`: le tableau [page:.times times]
  28. stocke les durées pour chaque keyframes de ce track dans un ordre séquentiel, et le tableau
  29. [page:.values values] array contient les valeurs modifiées correspondantes de la propriété animée.
  30. </p>
  31. <p>
  32. Une simple valeur, appartenant à un certain point temporel, ne peut pas simplement être un nombre, mais (par
  33. exemple) un vecteur (si c'est une position qui est animée) ou un quaternion (si c'est une rotation qui est animée). Pour
  34. cette raison, le tableau de valeurs (qui est également un tableau à une dimension) peut être de trois ou quatre fois la taille du
  35. tableau de durées.
  36. </p>
  37. <p>
  38. Il existe plusieurs sous-classes de `KeyframeTrack` correspondant aux différents
  39. types possibles de valeurs animées, héritant de la plupart des propriétés et méthodes:
  40. </p>
  41. <ul>
  42. <li>[page:BooleanKeyframeTrack]</li>
  43. <li>[page:ColorKeyframeTrack]</li>
  44. <li>[page:NumberKeyframeTrack]</li>
  45. <li>[page:QuaternionKeyframeTrack]</li>
  46. <li>[page:StringKeyframeTrack]</li>
  47. <li>[page:VectorKeyframeTrack]</li>
  48. </ul>
  49. <p>
  50. Quelques exemples qui montrent comment créer manuellement un [page:AnimationClip AnimationClips] avec différentes sortes
  51. de KeyframeTracks peuvent être trouvés dans le fichier [link:https://threejs.org/examples/jsm/animation/AnimationClipCreator.js AnimationClipCreator].
  52. </p>
  53. <p>
  54. Étant donné que les valeurs explicites ne sont spécifiées que pour les points temporels discrets stocké dans le tableau de durées,
  55. toutes les valeurs du milieu doivent être interpolées.
  56. </p>
  57. <p>
  58. Le nom du track est important pour la connexion de ce track avec une propriété spécifique du
  59. node animé (fait par [page:PropertyBinding]).
  60. </p>
  61. <h2>Constructeur</h2>
  62. <h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
  63. <p>
  64. [page:String name] - l'identifiant du `KeyframeTrack`.<br />
  65. [page:Array times] - un tableau des durées des keyframes, convertis en interne en un
  66. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
  67. [page:Array values] - un tableau avec les valeurs concernant le tableau de durées, convertis en interne en un
  68. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
  69. [page:Constant interpolation] - le type d'interpolation à utiliser. Voir
  70. [page:Animation Animation Constants] pour les valeurs possibles. La valeur par défaut est [page:Animation InterpolateLinear].
  71. </p>
  72. <h2>Propriétés</h2>
  73. <h3>[property:String name]</h3>
  74. <p>
  75. Le nom du track peut faire référence à des morph targets ou à des [page:SkinnedMesh bones] ou possiblement d'autres valeurs de l'objet animé. Voir
  76. [page:PropertyBinding.parseTrackName] pour les types de strings qui peuvent être assemblés:
  77. </p>
  78. <p>
  79. Le nom peut spécifier le noeud en utilisant son nom ou son uuid (bien qu'il doive être dans le
  80. sous-arbre du noeud du graphe de scène passé dans le mixer). Ou, si le nom du track commence par un point,
  81. le track s'applique au noeud racine qui a été passé en paramètre du mixer.
  82. </p>
  83. <p>
  84. Généralement après le noeud une propriété est spécifiée directement. Mais vous pouvez également spécifier une
  85. sous-propriété, comme .rotation[x], si vous voulez seulement contrôler X composants de la rotation
  86. via une float track.
  87. </p>
  88. <p>
  89. Vous pouvez également spécifier des bones ou des multimatériaux en utilisant un nom d'objet, par exemple:
  90. .bones[R_hand].scale; le canal rouge de la couleur diffuse du quatrième matériau dans un
  91. tableau de matériaux - comme autre exemple - peut être accédé avec .materials[3].diffuse[r].
  92. </p>
  93. <p>
  94. PropertyBinding résoudra également les noms de morph target, par exemple: .morphTargetInfluences[run].
  95. </p>
  96. <p>
  97. Note: Le nom de track ne doit pas nécessairement être unique. Plusieurs tracks peuvent gérer la même
  98. propriété. Le résultat doit être basé sur un mélange pondéré entre les mutiples tracks selon
  99. le poids de leurs actions respectives.
  100. </p>
  101. <h3>[property:Float32Array times]</h3>
  102. <p>
  103. Un [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
  104. convertis depuis le tableau de durées qui est passé en paramètre au constructeur.
  105. </p>
  106. <h3>[property:Float32Array values]</h3>
  107. <p>
  108. Un [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
  109. convertis depuis le tableau de valeurs qui est passé en paramètre au constructeur.
  110. </p>
  111. <h3>[property:Constant DefaultInterpolation]</h3>
  112. <p>
  113. Le type d'interpolation par défaut: [page:Animation InterpolateLinear].
  114. </p>
  115. <h3>[property:Constant TimeBufferType ]</h3>
  116. <p>
  117. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
  118. le type de buffer utilisé en interne pour les durées.
  119. </p>
  120. <h3>[property:Constant ValueBufferType ]</h3>
  121. <p>
  122. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
  123. le type de buffer utilisé en interne pour les valeurs.
  124. </p>
  125. <h2>Méthodes</h2>
  126. <h3>[method:KeyframeTrack clone]()</h3>
  127. <p>
  128. Renvoie une copie de ce track.
  129. </p>
  130. <h3>[method:Interpolant createInterpolant]()</h3>
  131. <p>
  132. Crée un [page:LinearInterpolant LinearInterpolant], un [page:CubicInterpolant CubicInterpolant]
  133. ou un [page:DiscreteInterpolant DiscreteInterpolant], selon la valeur du paramètre d'interpolation
  134. passé au constructeur.
  135. </p>
  136. <h3>[method:Interpolant getInterpolation]()</h3>
  137. <p>
  138. Renvoie le type d'interpolation.
  139. </p>
  140. <h3>[method:Number getValueSize]()</h3>
  141. <p>
  142. Retourne la taille de chaque valeur (qui est la taille du tableau de [page:.values valeurs] divisé
  143. par la longueur du tableau [page:.times times]).
  144. </p>
  145. <h3>[method:DiscreteInterpolant InterpolantFactoryMethodDiscrete]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
  146. <p>
  147. Crée un nouveau [page:DiscreteInterpolant DiscreteInterpolant] depuis le
  148. [page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
  149. passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
  150. créé automatiquement.
  151. </p>
  152. <h3>[method:LinearInterpolant InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
  153. <p>
  154. Crée un nouveau [page:LinearInterpolant LinearInterpolant] depuis le
  155. [page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
  156. passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
  157. créé automatiquement.
  158. </p>
  159. <h3>[method:CubicInterpolant InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
  160. <p>
  161. Crée un nouveau [page:CubicInterpolant CubicInterpolant] depuis le
  162. [page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
  163. passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
  164. créé automatiquement.
  165. </p>
  166. <h3>[method:this optimize]()</h3>
  167. <p>
  168. Retire les clés séquentielles équivalentse, qui sont communes dans les séquences de morph target.
  169. </p>
  170. <h3>[method:this scale]()</h3>
  171. <p>
  172. Met à l'échelle chaque vecteur grâce à un facteur.<br /><br />
  173. Note: C'est utile, par exemple, pour convertir à un certain taux de frames par secondes (comme
  174. réalisé en interne par
  175. [page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]).
  176. </p>
  177. <h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
  178. <p>
  179. Renseigne le type d'interpolation. Voir [page:Animation Animation Constants] pour les choix.
  180. </p>
  181. <h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
  182. <p>
  183. Déplace tous les keyframes avant ou après dans le temps.
  184. </p>
  185. <h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
  186. <p>
  187. Retire les keyframes avant `startTime` et après `endTime`,
  188. sans changer de valeurs entre [`startTime`, `endTime`].
  189. </p>
  190. <h3>[method:Boolean validate]()</h3>
  191. <p>
  192. Performe une validation minimale de chaque track du clip. Renvoie true si toutes les tracks sont valides.
  193. </p>
  194. <p>
  195. Cette méthode envoie des erreurs à la console, si un track est vide, si la [page:.valueSize value taille] n'est pas valide, si un élémént
  196. dans le tableau [page:.times times] ou [page:.values values] n'est pas un nombre valide ou si les éléménts du tableau `times` sont désorganisés.
  197. </p>
  198. <h2>Méthodes Statiques</h2>
  199. <h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
  200. <p>
  201. Convertis le track en JSON.
  202. </p>
  203. <h2>Source</h2>
  204. <p>
  205. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  206. </p>
  207. </body>
  208. </html>