You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
10 KiB
263 lines
10 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>[name]</h1>
|
||
|
|
|
||
|
|
<p class="desc">
|
||
|
|
Un KeyframeTrack est une séquence chronométrée de [link:https://en.wikipedia.org/wiki/Key_frame keyframes],
|
||
|
|
qui est composée de listes de durées et de valeurs connexes, qui sont utilisées pour animer
|
||
|
|
une propriété spécifique d'un objet.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Pour avoir un aperçu des différents éléments du système d'animation de three.js, consultez
|
||
|
|
l'article "Système d'Animation" dans la section "Étapes Suivantes" du manuel.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Contrairement à la hiérarchie d'animation du
|
||
|
|
[link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format] un
|
||
|
|
`KeyframeTrack` ne stocke pas ses keyframes comme étant des objets dans un tableau à "clés" (stockant
|
||
|
|
les durées et les valeurs pour chaque frame ensemble à un même endroit).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
A la place, il y a toujours deux tableaux dans un `KeyframeTrack`: le tableau [page:.times times]
|
||
|
|
stocke les durées pour chaque keyframes de ce track dans un ordre séquentiel, et le tableau
|
||
|
|
[page:.values values] array contient les valeurs modifiées correspondantes de la propriété animée.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Une simple valeur, appartenant à un certain point temporel, ne peut pas simplement être un nombre, mais (par
|
||
|
|
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
|
||
|
|
cette raison, le tableau de valeurs (qui est également un tableau à une dimension) peut être de trois ou quatre fois la taille du
|
||
|
|
tableau de durées.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Il existe plusieurs sous-classes de `KeyframeTrack` correspondant aux différents
|
||
|
|
types possibles de valeurs animées, héritant de la plupart des propriétés et méthodes:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>[page:BooleanKeyframeTrack]</li>
|
||
|
|
<li>[page:ColorKeyframeTrack]</li>
|
||
|
|
<li>[page:NumberKeyframeTrack]</li>
|
||
|
|
<li>[page:QuaternionKeyframeTrack]</li>
|
||
|
|
<li>[page:StringKeyframeTrack]</li>
|
||
|
|
<li>[page:VectorKeyframeTrack]</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Quelques exemples qui montrent comment créer manuellement un [page:AnimationClip AnimationClips] avec différentes sortes
|
||
|
|
de KeyframeTracks peuvent être trouvés dans le fichier [link:https://threejs.org/examples/jsm/animation/AnimationClipCreator.js AnimationClipCreator].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Étant donné que les valeurs explicites ne sont spécifiées que pour les points temporels discrets stocké dans le tableau de durées,
|
||
|
|
toutes les valeurs du milieu doivent être interpolées.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Le nom du track est important pour la connexion de ce track avec une propriété spécifique du
|
||
|
|
node animé (fait par [page:PropertyBinding]).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Constructeur</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
|
||
|
|
<p>
|
||
|
|
[page:String name] - l'identifiant du `KeyframeTrack`.<br />
|
||
|
|
[page:Array times] - un tableau des durées des keyframes, convertis en interne en un
|
||
|
|
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
|
||
|
|
[page:Array values] - un tableau avec les valeurs concernant le tableau de durées, convertis en interne en un
|
||
|
|
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
|
||
|
|
[page:Constant interpolation] - le type d'interpolation à utiliser. Voir
|
||
|
|
[page:Animation Animation Constants] pour les valeurs possibles. La valeur par défaut est [page:Animation InterpolateLinear].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Propriétés</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:String name]</h3>
|
||
|
|
<p>
|
||
|
|
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
|
||
|
|
[page:PropertyBinding.parseTrackName] pour les types de strings qui peuvent être assemblés:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Le nom peut spécifier le noeud en utilisant son nom ou son uuid (bien qu'il doive être dans le
|
||
|
|
sous-arbre du noeud du graphe de scène passé dans le mixer). Ou, si le nom du track commence par un point,
|
||
|
|
le track s'applique au noeud racine qui a été passé en paramètre du mixer.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Généralement après le noeud une propriété est spécifiée directement. Mais vous pouvez également spécifier une
|
||
|
|
sous-propriété, comme .rotation[x], si vous voulez seulement contrôler X composants de la rotation
|
||
|
|
via une float track.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Vous pouvez également spécifier des bones ou des multimatériaux en utilisant un nom d'objet, par exemple:
|
||
|
|
.bones[R_hand].scale; le canal rouge de la couleur diffuse du quatrième matériau dans un
|
||
|
|
tableau de matériaux - comme autre exemple - peut être accédé avec .materials[3].diffuse[r].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
PropertyBinding résoudra également les noms de morph target, par exemple: .morphTargetInfluences[run].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Note: Le nom de track ne doit pas nécessairement être unique. Plusieurs tracks peuvent gérer la même
|
||
|
|
propriété. Le résultat doit être basé sur un mélange pondéré entre les mutiples tracks selon
|
||
|
|
le poids de leurs actions respectives.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Float32Array times]</h3>
|
||
|
|
<p>
|
||
|
|
Un [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
|
||
|
|
convertis depuis le tableau de durées qui est passé en paramètre au constructeur.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Float32Array values]</h3>
|
||
|
|
<p>
|
||
|
|
Un [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
|
||
|
|
convertis depuis le tableau de valeurs qui est passé en paramètre au constructeur.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Constant DefaultInterpolation]</h3>
|
||
|
|
<p>
|
||
|
|
Le type d'interpolation par défaut: [page:Animation InterpolateLinear].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Constant TimeBufferType ]</h3>
|
||
|
|
<p>
|
||
|
|
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
|
||
|
|
le type de buffer utilisé en interne pour les durées.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[property:Constant ValueBufferType ]</h3>
|
||
|
|
<p>
|
||
|
|
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
|
||
|
|
le type de buffer utilisé en interne pour les valeurs.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Méthodes</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:KeyframeTrack clone]()</h3>
|
||
|
|
<p>
|
||
|
|
Renvoie une copie de ce track.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Interpolant createInterpolant]()</h3>
|
||
|
|
<p>
|
||
|
|
Crée un [page:LinearInterpolant LinearInterpolant], un [page:CubicInterpolant CubicInterpolant]
|
||
|
|
ou un [page:DiscreteInterpolant DiscreteInterpolant], selon la valeur du paramètre d'interpolation
|
||
|
|
passé au constructeur.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Interpolant getInterpolation]()</h3>
|
||
|
|
<p>
|
||
|
|
Renvoie le type d'interpolation.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Number getValueSize]()</h3>
|
||
|
|
<p>
|
||
|
|
Retourne la taille de chaque valeur (qui est la taille du tableau de [page:.values valeurs] divisé
|
||
|
|
par la longueur du tableau [page:.times times]).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:DiscreteInterpolant InterpolantFactoryMethodDiscrete]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
|
||
|
|
<p>
|
||
|
|
Crée un nouveau [page:DiscreteInterpolant DiscreteInterpolant] depuis le
|
||
|
|
[page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
|
||
|
|
passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
|
||
|
|
créé automatiquement.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:LinearInterpolant InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
|
||
|
|
<p>
|
||
|
|
Crée un nouveau [page:LinearInterpolant LinearInterpolant] depuis le
|
||
|
|
[page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
|
||
|
|
passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
|
||
|
|
créé automatiquement.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:CubicInterpolant InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
|
||
|
|
<p>
|
||
|
|
Crée un nouveau [page:CubicInterpolant CubicInterpolant] depuis le
|
||
|
|
[page:KeyframeTrack.times times] et [page:KeyframeTrack.times values]. Un Float32Array peut être
|
||
|
|
passé en paramètre, il recevra les résultats. Autrement, un nouveau tableau avec la taille appropriée sera
|
||
|
|
créé automatiquement.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this optimize]()</h3>
|
||
|
|
<p>
|
||
|
|
Retire les clés séquentielles équivalentse, qui sont communes dans les séquences de morph target.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this scale]()</h3>
|
||
|
|
<p>
|
||
|
|
Met à l'échelle chaque vecteur grâce à un facteur.<br /><br />
|
||
|
|
|
||
|
|
Note: C'est utile, par exemple, pour convertir à un certain taux de frames par secondes (comme
|
||
|
|
réalisé en interne par
|
||
|
|
[page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
|
||
|
|
<p>
|
||
|
|
Renseigne le type d'interpolation. Voir [page:Animation Animation Constants] pour les choix.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
|
||
|
|
<p>
|
||
|
|
Déplace tous les keyframes avant ou après dans le temps.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
|
||
|
|
<p>
|
||
|
|
Retire les keyframes avant `startTime` et après `endTime`,
|
||
|
|
sans changer de valeurs entre [`startTime`, `endTime`].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>[method:Boolean validate]()</h3>
|
||
|
|
<p>
|
||
|
|
Performe une validation minimale de chaque track du clip. Renvoie true si toutes les tracks sont valides.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Méthodes Statiques</h2>
|
||
|
|
|
||
|
|
<h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
|
||
|
|
<p>
|
||
|
|
Convertis le track en JSON.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Source</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|