|
|
<!DOCTYPE html><html lang="en"><head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>Animation System</title>
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
<meta name="twitter:site" content="@threejs">
|
|
|
<meta name="twitter:title" content="Three.js – Animation System">
|
|
|
<meta property="og:image" content="https://threejs.org/files/share.png">
|
|
|
<link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
|
|
|
<link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
|
|
|
|
|
|
<link rel="stylesheet" href="../resources/lesson.css">
|
|
|
<link rel="stylesheet" href="../resources/lang.css">
|
|
|
<script type="importmap">
|
|
|
{
|
|
|
"imports": {
|
|
|
"three": "../../build/three.module.js"
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="lesson-title">
|
|
|
<h1>Animation System</h1>
|
|
|
</div>
|
|
|
<div class="lesson">
|
|
|
<div class="lesson-main">
|
|
|
|
|
|
<h2>Overview</h2>
|
|
|
|
|
|
<p class="desc">
|
|
|
Within the three.js animation system you can animate various properties of your models:
|
|
|
the bones of a skinned and rigged model, 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]
|
|
|
(beware 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.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h3>Animation Clips</h3>
|
|
|
|
|
|
<p 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/KhronosGroup/glTF-Blender-IO glTF Blender exporter] and
|
|
|
loading it into a three.js scene using `GLTFLoader` — one of the response fields
|
|
|
should be an array named "animations", containing the animation clips
|
|
|
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.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h3>Keyframe Tracks</h3>
|
|
|
|
|
|
<p class="desc">
|
|
|
|
|
|
Inside of such an `AnimationClip` the data for each animated property are stored in a
|
|
|
separate `KeyframeTrack`. Assuming a character object has a 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 />
|
|
|
|
|
|
Assuming the model has 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 influence of a certain morph target changes during the performance
|
|
|
of the clip.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h3>Animation Mixer</h3>
|
|
|
|
|
|
<p class="desc">
|
|
|
|
|
|
The stored data forms only the basis for the animations - actual playback is controlled by
|
|
|
the `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.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h3>Animation Actions</h3>
|
|
|
|
|
|
<p class="desc">
|
|
|
|
|
|
The `AnimationMixer` itself has only very few (general) properties and methods, because it
|
|
|
can be controlled by the animation actions. 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.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h3>Animation Object Groups</h3>
|
|
|
|
|
|
<p class="desc">
|
|
|
|
|
|
If you want a group of objects to receive a shared animation state, you can use an
|
|
|
`AnimationObjectGroup`.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<h3>Supported Formats and Loaders</h3>
|
|
|
|
|
|
<p class="desc">
|
|
|
Note that not all model formats include animation (OBJ notably does not), and that only some
|
|
|
three.js loaders support `AnimationClip` sequences. Several that <i>do</i>
|
|
|
support this animation type:
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
<li>THREE.ObjectLoader</li>
|
|
|
<li>THREE.BVHLoader</li>
|
|
|
<li>THREE.ColladaLoader</li>
|
|
|
<li>THREE.FBXLoader</li>
|
|
|
<li>THREE.GLTFLoader</li>
|
|
|
</ul>
|
|
|
|
|
|
<p 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.
|
|
|
</p>
|
|
|
|
|
|
<h2>Example</h2>
|
|
|
|
|
|
<pre class="prettyprint notranslate lang-js" translate="no">
|
|
|
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();
|
|
|
} );
|
|
|
</pre>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="../resources/prettify.js"></script>
|
|
|
<script src="../resources/lesson.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body></html>
|