Animation and Physics - Three.js - page 312

6. With this material, we can create the mesh to be added to the scene. This
time, as we want to use the animation provided from Blender, we create
THREE.MorphAnimMesh , which we add to the scene:
mesh = new THREE.MorphAnimMesh(model,
mat);
mesh.castShadow = true;
scene.add(mesh);
7. We need to take a final step before we can play the animation:
mesh.parseAnimations();
mesh.playAnimation('animation', 20);
mesh.duration = 10;
render();
With the parseAnimation() function, Three.js will parse the names of the
provided morph target elements from the model and use it to create an an-
imation. When you export using the Three.js plugin from Blender, the name
of the animation is animation . To play the animation, we call playAnima-
tion with the name of the animation and the frame rate, and finally, we set
the duration (in seconds) of the animation. Note that you don't always have
to set the duration of an animation. In some cases, the model itself provides
the duration.
8. The final change we need to make is in the render function itself:
var t = new THREE.Clock();
function render() {
renderer.render(scene, camera);
mesh.updateAnimation(t.getDelta());
requestAnimationFrame(render);
}
Here, we create a global THREE.Clock() instance, which we use to de-
termine how much time is passed between sequential calls to the render
function. This is passed into the updateAnimation function of
THREE.MorphAnimMesh so that it can calculate which frame to show.