-
-
Notifications
You must be signed in to change notification settings - Fork 35.7k
/
Copy pathanimation-system.html
173 lines (130 loc) · 6.03 KB
/
animation-system.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!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>