You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
5.7 KiB
148 lines
5.7 KiB
2 years ago
|
<!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>
|