# Système d'Animation

## Vue d'ensemble

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.

### Clips d'Animation

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.

### Pistes d'Images Clés

À 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.

### Mixeur d'Animation

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.

### Actions d'Animation

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.

### Groupes d'Objets d'Animation

Si vous souhaitez qu'un groupe d'objets reçoive un état d'animation partagé, vous pouvez utiliser un `AnimationObjectGroup`.

### Formats et Chargeurs Pris en Charge

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 :

- THREE.ObjectLoader
- THREE.BVHLoader
- THREE.ColladaLoader
- THREE.FBXLoader
- THREE.GLTFLoader

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.

## Exemple

    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();
    } );