Système d'animation ([name])

Aperçu

Dans le système d'animation de three.js vous pouvez animer différentes propriétés de vos modèles: les os d'un [page:SkinnedMesh skinned and rigged model], les morph targets, les différentes propriétés des matériaux (couleurs, opacité, booléens), la visibilité et les transformations. Les propriétés animées peuvent avoir différentes animations comme un fade-in, un fade-out, un fondu ou un warp. Le poids et l'échelle temporelle des différentes animations simultanées sur le même objet peuvent également être changées indépendamment. Différentes animations sur le même objet peuvent-être synchronisées.

Pour effectuer tout cela dans un système homogène, le système d'animation three.js [link:https://github.com/mrdoob/three.js/issues/6881 a complètement changé en 2015] (attention aux informations dépassées!), et a maintenant une architecture similaire à Unity/Unreal Engine 4. Cette page offre un bref aperçu des principaux composants du système et de comment ils fonctionnent ensemble.

Animation Clips

Si vous aveez réussi à importer un modèle 3D (peu importe qu'il ait des os ou une morph targets ou les deux) — par exemple en l'exportant depuis Blender avec le [link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter] et en le chargeant dans la scène three.js en utilisant [page:GLTFLoader] — un des champs doit-être un tableau nommé "animations", contenant les [page:AnimationClip AnimationClips] pour ce modèle (voir une liste des loaders possibles ci-dessous).

Chaque `AnimationClip` conserve les données d'une certaine activité d'un objet. Si le mesh est un personnage, par exemple, il pourrait y avoir un AnimationClip pour une marche, un second pour un saut, un troisième pour un pas de côté et ainsi de suite.

Keyframe Tracks

A l'intérieur d'un `AnimationClip` les données pour chaque propriétés animées sont stockées dans un [page:KeyframeTrack] séparé. En considérant que l'objet personnage a un [page:Skeleton skeleton], un keyframe track pourrait stocker les changements de valeur de la position de l'os inférieur d'un bras à travers le temps, un track différent stockerait les changements de valeur de la rotation du même bras, un troisème pourrait stocker la position, la rotation ou l'échelle d'un autre os, ainsi de suite. Il doit-être clair qu'un, AnimationClip peut-être composé de beaucoup de ce genre de tracks.

En considérant que le modèle a un morph targets (par exemple un morph target pour un visage amical et un autre pour un visage énervé), chaque track conserve l'information de comment l'[page:Mesh.morphTargetInfluences influence] d'un certain morph change durant l'exécution du clip.

Mixer d'Animations

Les informations stockées représentent uniquement la base de l'animation - le playback est en réalité contrôlé par l'[page:AnimationMixer]. Vous vous doutez bien que ce n'est pas uniquement un visualiseur d'animations, mais une simulation d'un hardware comme une vraie console de mixage , qui peut contrôler plusieurs animations simultanément, les mélangeant et les fusionnant.

Actions d'Animations

L'`AnimationMixer` en lui-même a seulement quelques propriétés (générales) et méthodes, car il peut-être contrôlé par l'[page:AnimationAction AnimationActions]. En configurant un `AnimationAction` vous pouvez déterminer qu'un certain `AnimationClip` doit-être joué, mis en pause ou stoppé sur un des mixers, si et à quelle fréquence le clip doit-être répeté, si il doit-être joué avec un fade, une mise à l'échelle temporelle, et d'autres choses, comme le fondu ou la synchronisation.

Animations de Groupes d'Objets

Si vous voulez qu'un groupe d'objets reçoive un statut d'animation partagé, vous pouvez utiliser un [page:AnimationObjectGroup].

Formats et loaders supportés

Notez que tous les formats de modèles n'incluent pas les animations (notamment OBJ ne les supporte pas), et que seulement certains loaders three.js supportent les séquences d'[page:AnimationClip AnimationClip]. Plusieurs autres supportent ce type d'animations:

[page:ObjectLoader THREE.ObjectLoader]
THREE.BVHLoader
THREE.ColladaLoader
THREE.FBXLoader
[page:GLTFLoader THREE.GLTFLoader]
THREE.MMDLoader

Notez que 3ds max et Maya ne peuvent actuellement pas exporter plusieurs animations (qui ne sont pas sur la même timeline) directement dans un seul fichier.

Exemple


		let mesh;

		// Create an AnimationMixer, and get the list of AnimationClip instances
		const mixer = new THREE.AnimationMixer( mesh );
		const clips = mesh.animations;

		// Update the mixer on each frame
		function update () {
			mixer.update( deltaSeconds );
		}

		// Play a specific animation
		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
		const action = mixer.clipAction( clip );
		action.play();

		// Play all animations
		clips.forEach( function ( clip ) {
			mixer.clipAction( clip ).play();
		} );