--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <base href="../../" />
+ <script src="list.js"></script>
+ <script src="page.js"></script>
+ <link type="text/css" rel="stylesheet" href="page.css" />
+ </head>
+ <body>
+ <h1>[name]</h1>
+
+ <h2>Overview</h2>
+
+ <div class="desc">
+ Within the three.js animation system you can animate various properties of your models:
+ the bones of a [page:SkinnedMesh skinned and rigged model],
+ [page:Geometry.morphTargets morph targets], different material properties (colors,
+ opacity, booleans), visibility and transforms. The animated properties can be faded in,
+ faded out, crossfaded and warped. The weight and time scales of different simultaneous
+ animations on the same object as well as on different objects can be changed
+ independently. Various animations on the same and on different objects can be
+ synchronized.<br /><br />
+
+ To achieve all this in one homogeneous system, the three.js animation system
+ [link:https://github.com/mrdoob/three.js/issues/6881 has completely changed in 2015]
+ (be aware of outdated information!), and it has now an architecture similar to
+ Unity/Unreal Engine 4. This page gives a short overview of the main components of the
+ system and how they work together.
+
+ </div>
+
+ <h3>Animation Clips</h3>
+
+ <div class="desc">
+
+ If you have successfully imported an animated 3D object (it doesn't matter if it has
+ bones or morph targets or both) - for example exporting it from Blender with the
+ [link:https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender/addons/io_three Blender exporter] and
+ loading it into a three.js scene using [page:JSONLoader] -, one of the geometry's
+ properties of the loaded mesh should be an array named "animations", containing the
+ [page:AnimationClip AnimationClips] for this model (see a list of possible loaders below).<br /><br />
+
+ Each *AnimationClip* usually holds the data for a certain activity of the object. If the
+ mesh is a character, for example, there may be one AnimationClip for a walkcycle, a second
+ for a jump, a third for sidestepping and so on.
+
+ </div>
+
+ <h3>Keyframe Tracks</h3>
+
+ <div class="desc">
+
+ Inside of such an *AnimationClip* the data for each animated property are stored in a
+ separate [page:KeyframeTrack]. Assumed a character object has a [page:Skeleton skeleton],
+ one keyframe track could store the data for the position changes of the lower arm bone
+ over time, a different track the data for the rotation changes of the same bone, a third
+ the track position, rotation or scaling of another bone, and so on. It should be clear,
+ that an AnimationClip can be composed of lots of such tracks.<br /><br />
+
+ Assumed the model has [page:Geometry.morphTargets morph targets] (for example one morph
+ target showing a friendly face and another showing an angry face), each track holds the
+ information as to how the [page:Mesh.morphTargetInfluences influence] of a certain morph
+ target changes during the performance of the clip.
+
+ </div>
+
+ <h3>Animation Mixer</h3>
+
+ <div class="desc">
+
+ The stored data form only the basis for the animations - actual playback is controlled by
+ the [page:AnimationMixer]. You can imagine this not only as a player for animations, but
+ as a simulation of a hardware like a real mixer console, which can control several animations
+ simultaneously, blending and merging them.
+
+ </div>
+
+ <h3>Animation Actions</h3>
+
+ <div class="desc">
+
+ The *AnimationMixer* itself has only very few (general) properties and methods, because it
+ can be controlled by the [page:AnimationAction AnimationActions]. By configuring an
+ *AnimationAction* you can determine when a certain *AnimationClip* shall be played, paused
+ or stopped on one of the mixers, if and how often the clip has to be repeated, whether it
+ shall be performed with a fade or a time scaling, and some additional things, such crossfading
+ or synchronizing.
+
+ </div>
+
+ <h3>Animation Object Groups</h3>
+
+ <div class="desc">
+
+ If you want a group of objects to receive a shared animation state, you can use an
+ [page:AnimationObjectGroup].
+
+ </div>
+
+ <h3>Supported Formats and Loaders</h3>
+
+ <div class="desc">
+ Note that not all model formats include animation (OBJ notably does not), and that only some
+ three.js loaders support [page:AnimationClip AnimationClip] sequences. Several that <i>do</i>
+ support this animation type:
+ </div>
+
+ <ul>
+ <li>[page:JSONLoader THREE.JSONLoader]</li>
+ <li>[page:ObjectLoader THREE.ObjectLoader]</li>
+ <li>THREE.BVHLoader</li>
+ <li>THREE.FBXLoader</li>
+ <li>[page:GLTFLoader THREE.GLTFLoader]</li>
+ <li>THREE.MMDLoader</li>
+ <li>THREE.SEA3DLoader</li>
+ </ul>
+
+ <div class="desc">
+ Note that 3ds max and Maya currently can't export multiple animations (meaning animations which are not
+ on the same timeline) directly to a single file.
+ </div>
+
+ <h2>Example</h2>
+
+ <code>
+ var mesh;
+
+ // Create an AnimationMixer, and get the list of AnimationClip instances
+ var mixer = new THREE.AnimationMixer( mesh );
+ var clips = mesh.animations;
+
+ // Update the mixer on each frame
+ function update () {
+ mixer.update( deltaSeconds );
+ }
+
+ // Play a specific animation
+ var clip = THREE.AnimationClip.findByName( clips, 'dance' );
+ var action = mixer.clipAction( clip );
+ action.play();
+
+ // Play all animations
+ clips.forEach( function ( clip ) {
+ mixer.clipAction( clip ).play();
+ } );
+ </code>
+
+ </body>
+</html>
OSDN Git Service
