Contrôler les animations d’un modèle 3D dans Three.js avec AnimationMixer

Utiliser des objets 3D animés dans une scène Three.js est une étape importante pour rendre son univers plus vivant et proposer une expérience unique. Mais, jusqu’à présent, nous n’avions pas encore abordé le sujet des animations.

C’est cette fonctionnalité qui va nous permettre de faire entrer en mouvement la structure 3D d’un objet de la scène.

Dans cette nouvelle publication, nous allons apprendre à utiliser les animations d’un modèle 3D, grâce à la classe AnimationMixer de Three.js !

Les animations et Three.js

De manière générale, dans le monde de la modélisation 3D, il existe plusieurs méthodes pour animer un objet 3D.

Three.js gère les animations par squelette ( ou armature), et c’est ce type d’animation très polyvalent que nous allons étudier dans cette publication.

Ce chapitre traite uniquement de l’utilisation d’animations incluses dans un objet 3D chargé depuis un fichier GLB / GLTF. Créer et animer un objet 3D complexe depuis un outil de modélisation requiers d’autres compétence !

Si vous souhaitez plus d’informations au sujet du chargement des fichiers GLB / GLTF :

Charger un modèle 3D GLB / GLTF avec Three.js – GLTFLoader

Importer et animer un modèle 3D dans Three.js

Comme expliqué plus haut, pour animer un modèle 3D dans la scène, nous utiliserons la classe AnimationMixer. Dans le cadre de cet exemple, j’utiliserais le modèle 3D du personnage de la vidéo d’introduction.

Commençons par créer quelques variables globales dans notre code JavaScript :

• mixer – Notre instance de AnimationMixer.
• Player_anim_IDLE – L’animation de repos ( inactif) de notre personnage d’exemple.
• Player_anim_RUN – L’animation de déplacement de notre personnage d’exemple.

Il est nécessaire de créer une variable par animation de votre modèle 3D – Dans mon cas, deux variables.

var mixer                = undefined; 	// Three.JS AnimationMixer
var Player_anim_IDLE     = undefined;	// Animation IDLE
var Player_anim_RUN      = undefined;	// Animation RUN

Dans le cadre de cet exemple, nous utiliserons un modèle 3D chargé depuis un fichier GLB. Ce type de fichier est idéal pour les modèles animés, je vous conseille vivement de l’utiliser !

Ainsi, lorsque le modèle 3D que nous souhaitons animer est chargé, initialisons la variable mixer avec une instance de classe AnimationMixer :

var loader = new GLTFLoader();
loader.load( '../Players_NPC/Girl.glb', function ( gltf )
{
    // ---------------- ANIMATIONMIXER----------------
    mixer = new THREE.AnimationMixer( gltf.scene );

    [...]
}

Le constructeur de AnimationMixer nécessite un seul paramètre : L’objet 3D à animer.

J’en profite pour rappeler que l’objet 3D chargé doit nativement inclure un squelette ( Arborescence de Bone) et des animations !

Attention, il est important de comprendre qu’il est nécessaire de créer une instance de AnimationMixer par objet à animer. Une variable de type AnimationMixer ne peux gérer qu’un objet à la fois !

Puis, récupérons les animations chargées depuis le fichier GLB :

//Anims
Player_anim_IDLE = gltf.animations[ 0] ; // first animation
Player_anim_RUN  = gltf.animations[ 1] ; // second animation

Lorsque c’est fait, il est désormais possible de lancer une animation ! Pour cela, nous utilisons la méthode play. Notons qu’il est possible d’arrêter une animation avec la méthode équivalente stop.

Nous choisissons d’exécuter l’animation Player_anim_IDLE :

mixer.clipAction( Player_anim_IDLE).play();

Pour finir, il est nécessaire de mettre à jour l’animation en fonction du temps écoulé. Pour cela, nous utilisons la méthode update de notre variable mixer dans la boucle principale de notre code :

var delta = clock.getDelta();
mixer.update( delta );

N’oubliez pas de vous assurer que tout est correctement chargé avant d’appeler la méthode update ! Vous pouvez, par exemple, utiliser un simple if(mixer).

Notons qu’il est possible de de s’aider de SkeletonHelper pour débugger l’armature de notre modèle 3D. Retrouvez un exemple d’utilisation de cette classe dans la publication suivante :

Les Helpers Three.JS – Une aide pour mettre en place et débugger nos scènes 3D

Conclusion et code final

Pour clôturer cette publication, voici notre code final destiné à l’animation d’un objet 3D :

var mixer                = undefined; 	// Three.JS AnimationMixer
var Player_anim_IDLE     = undefined;	// Animation IDLE
var Player_anim_RUN      = undefined;	// Animation RUN
var MainPlayer           = undefined // Mesh

[...]
var loader = new GLTFLoader();
loader.load( '../Players_NPC/Girl.glb', function ( gltf )
{
    // ---------------- ANIMATIONMIXER----------------
    mixer = new THREE.AnimationMixer( gltf.scene );

    //Anims
    Player_anim_IDLE = gltf.animations[ 0] ; // first animation
    Player_anim_RUN  = gltf.animations[ 1] ; // second animation

    mixer.clipAction( Player_anim_IDLE).play();

    //Mesh
    MainPlayer = gltf.scene;
    scene.add(MainPlayer);
}
[...]

function render()
{
  [...]
  
  var delta = clock.getDelta();
  mixer.update( delta );
}

Félicitations, vous avez réussi à charger et animer un modèle 3D dans une scène Three.js !

N’hésitez pas à télécharger le guide complet de Three.js University pour progresser encore plus vite !

Le contrôle des animations dans Three.js est un vaste domaine ! Cet article ne couvre que les bases du sujet, mais vous pouvez devenir un expert des animations Three.js grâce au chapitre 10 du guide téléchargeable !

En plus des bases que je viens de vous présenter, nous découvrirons de nombreuses manières d’utiliser les animations ( règles de répétitions, transitions fluides entre deux animations … ) !

Vous pouvez télécharger le guide complet ici :