Game Development Reference
In-Depth Information
The first thing we do is set our material to be aware that the mesh will be animated
with the
morphTargets
properties and optionally with
morphNormal
properties.
Next, we check whether colors will change during the animation, and set the mesh
faces to their initial color if so (if you know your model doesn't have
morphColors
,
you can leave out that block). Then the normals are computed (if we have them)
and our
MorphAnimMesh
animation is created. We set the
duration
value of the
full animation, and finally store the mesh in the global
morphs
array so that we can
update it during our physics loop:
for (var i = 0; i < morphs.length; i++) {
morphs[i].updateAnimation(delta);
}
Under the hood, the
updateAnimation
method just changes which set of positions in
the animation the mesh should be interpolating between. By default, the animation
will start immediately and loop indefinitely. To stop animating, just stop calling
updateAnimation
.
Skeletal animation
Skeletal animation moves a group of vertices in a mesh together by making them
follow the movement of
bone
. This is generally easier to design because artists
only have to move a few bones instead of potentially thousands of vertices. It's
also typically less memory-intensive for the same reason.
To use morph animation, use a
THREE.SkinnedMesh
class, which is a subclass of the
normal mesh:
var loader = new THREE.JSONLoader();
loader.load('model.js', function(geometry, materials) {
for (var i = 0; i < materials.length; i++) {
materials[i].skinning = true;
}
var material = new THREE.MeshFaceMaterial(materials);
THREE.AnimationHandler.add(geometry.animation);
var mesh = new THREE.SkinnedMesh(geometry, material, false);
scene.add(mesh);
var animation = new THREE.Animation(mesh, geometry.animation.name);
animation.interpolationType = THREE.AnimationHandler.LINEAR; // or
CATMULLROM for cubic splines (ease-in-out)
animation.play();
});