Adding Detail - Game Development with Three.js - page 64

Mesh animation
Using animated models is not very different from using normal models. There are
essentially two types of animation to consider (in addition to manually changing the
position of a mesh's geometry in Three.js).
If all you need is to smoothly transition properties between different
values—for example, changing the rotation of a door in order to animate
it opening—you can use the Tween.js library at https://github.com/
sole/tween.js to do so instead of animating the mesh itself. Jerome
Etienne has a nice tutorial on doing this at http://learningthreejs.
com/blog/2011/08/17/tweenjs-for-smooth-animation/ .
Morph animation
Morph animation stores animation data as a sequence of positions. For example, if
you had a cube with a shrink animation, your model could hold the positions of the
vertices of the cube at full size and at the shrunk size. Then animation would consist
of interpolating between those states during each rendering or keyframe . The data
representing each state can hold either vertex targets or face normals.
To use morph animation, the easiest approach is to use a THREE.MorphAnimMesh
class, which is a subclass of the normal mesh. In the following example, the
highlighted lines should only be included if the model uses normals:
var loader = new THREE.JSONLoader();
loader.load('model.js', function(geometry) {
var material = new THREE.MeshLambertMaterial({
color: 0x000000,
morphTargets: true,
morphNormals: true,
});
if (geometry.morphColors && geometry.morphColors.length) {
var colorMap = geometry.morphColors[0];
for (var i = 0; i < colorMap.colors.length; i++) {
geometry.faces[i].color = colorMap.colors[i];
}
material.vertexColors = THREE.FaceColors;
}
geometry.computeMorphNormals();
var mesh = new THREE.MorphAnimMesh(geometry, material);
mesh.duration = 5000; // in milliseconds
scene.add(mesh);
morphs.push(mesh);
});