Au sein du système d'animation de three.js, vous pouvez animer diverses propriétés de vos modèles :
les os d'un modèle skinné et riggé, les morph targets, différentes propriétés de matériaux
(couleurs, opacité, booléens), la visibilité et les transformations. Les propriétés animées peuvent être introduites en fondu,
dissoutes en fondu, fondues enchaînées et déformées. L'influence (weight) et l'échelle temporelle (time scales) de différentes animations simultanées
sur le même objet ainsi que sur différents objets peuvent être modifiées
indépendamment. Diverses animations sur le même objet et sur différents objets peuvent être
synchronisées.
Pour atteindre tout cela dans un seul système homogène, le système d'animation de three.js
[link:https://github.com/mrdoob/three.js/issues/6881 a complètement changé en 2015]
(méfiez-vous des informations obsolètes !), et il a maintenant une architecture similaire à
Unity/Unreal Engine 4. Cette page donne un bref aperçu des principaux composants du
système et de leur fonctionnement ensemble.
Si vous avez importé avec succès un objet 3D animé (peu importe qu'il ait des
os, des morph targets, ou les deux) — par exemple en l'exportant depuis Blender avec l'
[link:https://github.com/KhronosGroup/glTF-Blender-IO exportateur glTF pour Blender] et
en le chargeant dans une scène three.js à l'aide de `GLTFLoader` — l'un des champs de réponse
devrait être un tableau nommé "animations", contenant les clips d'animation
pour ce modèle (voir une liste des chargeurs possibles ci-dessous).
Chaque `AnimationClip` contient généralement les données pour une certaine activité de l'objet. Si le
mesh est un personnage, par exemple, il peut y avoir un AnimationClip pour un cycle de marche, un second
pour un saut, un troisième pour un pas de côté, et ainsi de suite.
À l'intérieur d'un tel `AnimationClip`, les données pour chaque propriété animée sont stockées dans une
`KeyframeTrack` séparée. En supposant qu'un objet personnage a un squelette,
une piste d'images clés pourrait stocker les données des changements de position de l'os de l'avant-bras
au fil du temps, une piste différente les données des changements de rotation du même os, une troisième
la position, la rotation ou l'échelle d'un autre os, et ainsi de suite. Il devrait être clair
qu'un AnimationClip peut être composé de nombreuses pistes de ce type.
En supposant que le modèle a des morph targets (par exemple un morph
target montrant un visage amical et un autre montrant un visage en colère), chaque piste contient les
informations sur la manière dont l'influence d'un certain morph target change pendant la performance
du clip.
Les données stockées ne forment que la base des animations - la lecture réelle est contrôlée par le `AnimationMixer`. Vous pouvez l'imaginer non seulement comme un lecteur d'animations, mais comme une simulation d'un matériel comme une véritable console de mixage, qui peut contrôler plusieurs animations simultanément, en les mélangeant et en les fusionnant.
Le `AnimationMixer` lui-même n'a que très peu de propriétés et de méthodes (générales), car il peut être contrôlé par les actions d'animation. En configurant une `AnimationAction`, vous pouvez déterminer quand un certain `AnimationClip` doit être lu, mis en pause ou arrêté sur l'un des mixeurs, si et combien de fois le clip doit être répété, s'il doit être exécuté avec un fondu ou une échelle temporelle, et quelques éléments supplémentaires, tels que le fondu enchaîné ou la synchronisation.
Si vous souhaitez qu'un groupe d'objets reçoive un état d'animation partagé, vous pouvez utiliser un `AnimationObjectGroup`.
Notez que tous les formats de modèle n'incluent pas l'animation (OBJ notamment ne le fait pas), et que seuls certains chargeurs three.js supportent les séquences `AnimationClip`. Plusieurs qui supportent ce type d'animation :
Notez que 3ds max et Maya ne peuvent actuellement pas exporter plusieurs animations (c'est-à-dire des animations qui ne sont pas sur la même ligne de temps) directement dans un seul fichier.
let mesh;
// Créer un AnimationMixer, et obtenir la liste des instances de AnimationClip
const mixer = new THREE.AnimationMixer( mesh );
const clips = mesh.animations;
// Mettre à jour le mixeur à chaque image
function update () {
mixer.update( deltaSeconds );
}
// Jouer une animation spécifique
const clip = THREE.AnimationClip.findByName( clips, 'dance' );
const action = mixer.clipAction( clip );
action.play();
// Jouer toutes les animations
clips.forEach( function ( clip ) {
mixer.clipAction( clip ).play();
} );