(For more resources related to this topic, see here.)

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.jsto do so instead of animating the mesh itself. Jerome Etienne has 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);
});

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

The model we’re using in this example already has materials, so unlike in the morph animation examples, we have to change the existing materials instead of creating a new one. For skeletal animation we have to enable skinning, which refers to how the materials are wrapped around the mesh as it moves. We use the THREE.AnimationHandler utility to track where we are in the current animation and a THREE.SkinnedMesh utility to properly handle our model’s bones. Then we use the mesh to create a new THREE.Animation and play it. The animation’s interpolationType determines how the mesh transitions between states. If you want cubic spline easing (slow then fast then slow), use THREE.AnimationHandler.CATMULLROM instead of the LINEAR easing.

We also need to update the animation in our physics loop:

THREE.AnimationHandler.update(delta);

It is possible to use both skeletal and morph animations at the same time. In this case, the best approach is to treat the animation as skeletal and manually update the mesh’s morphTargetInfluences array as demonstrated in examples/webgl_animation_skinning_morph.html in the Three.js project.

Summary

This article explains how to manage external assets such as 3D models, as well as add details to your worlds and also teaches us to manage 3D models and animation.

Resources for Article:

Further resources on this subject:

• Introduction to Game Development Using Unity 3D [Article]
• Basics of Exception Handling Mechanism in JavaScript Testing [Article]
• 2D game development with Monkey [Article]