static
This commit is contained in:
蔡玲
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<base href="../../../" />
|
||||
<script src="page.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="page.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>[name]</h1>
|
||||
|
||||
<h2>Overview</h2>
|
||||
|
||||
<p 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], 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 [page:GLTFLoader] — one of the response fields
|
||||
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.
|
||||
|
||||
</p>
|
||||
|
||||
<h3>Keyframe Tracks</h3>
|
||||
|
||||
<p class="desc">
|
||||
|
||||
Inside of such an *AnimationClip* the data for each animated property are stored in a
|
||||
separate [page:KeyframeTrack]. Assuming 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 />
|
||||
|
||||
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 [page:Mesh.morphTargetInfluences 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 [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.
|
||||
|
||||
</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 [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.
|
||||
|
||||
</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
|
||||
[page: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 [page:AnimationClip AnimationClip] sequences. Several that <i>do</i>
|
||||
support this animation type:
|
||||
</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">
|
||||
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>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user