Game Development Reference
In-Depth Information
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.
Particle systems
Now that our flags are in place and we've learned how to manage the resources we'll
need to decorate our world, let's add some additional visual effects. The first type of
effect we'll look at is particle systems.
Particles are planes that always face the camera, usually grouped together into a
system
to create some effect like fire or steam. They are essential for creating great
visuals like this colorful heart:
Particles from examples/webgl_particles_shapes.html with shapes by zz85