Graphics Reference
In-Depth Information
the animation from our model to the handler. Next, we need to create a
THREE.Animation
instance. This object combines our model with the an-
imation we want to play. When we have this object we can call the
play()
function to tell Three.js to play the animation.
8. The final step we need to take before the animation will play is to update the
render
loop:
var t = new THREE.Clock();
function render() {
renderer.render(scene, camera);
THREE.AnimationHandler.update(
t.getDelta() );
requestAnimationFrame(render);
}
Here, we use
THREE.Clock()
to determine how much time has passed
(
t.getDelta()
) between this frame and the previous one. This is passed
into
THREE.AnimationHandler
to update all the registered animations
and move the mesh in the correct position.
How it works…
When exporting the animation, the Three.js exporter will write out the position and
rotation of the bones at the times we specified in Blender. This information can then
be used directly in Three.js to determine the position and rotation of the bones when
we're playing back the animation. This way, we can create fairly complex animations
without having to create huge model files.
There's more…
Working with skeletons in Blender and creating animations from them is a subject on
which much is written. If you're interested in learning more about rigging models and
creating skeleton-based animations, a couple of good resources to start with are the
following:
