javascript
/
three.js
oglindă de https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!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>Système d'animation ([name])</h1>

		<h2>Aperçu</h2>

		<p class="desc">
			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.<br /><br />

			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.

		</p>

		<h3>Animation Clips</h3>

		<p class="desc">

			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).<br /><br />

			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.

		</p>

		<h3>Keyframe Tracks</h3>

		<p class="desc">

			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.<br /><br />

			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.

		</p>

		<h3>Mixer d'Animations</h3>

		<p class="desc">

			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.

		</p>

		<h3>Actions d'Animations</h3>

		<p class="desc">

			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.

		</p>

		<h3>Animations de Groupes d'Objets</h3>

		<p class="desc">

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

		</p>

		<h3>Formats et loaders supportés</h3>

		<p class="desc">
			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 <i>supportent</i>
			ce type d'animations:
		</p>

			<ul>
				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
				<li>THREE.BVHLoader</li>
				<li>THREE.ColladaLoader</li>
				<li>THREE.FBXLoader</li>
				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
				<li>THREE.MMDLoader</li>
			</ul>

		<p class="desc">
			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.
		</p>

		<h2>Exemple</h2>

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

	</body>
</html>