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();
});
 
Search WWH ::




Custom Search