Graphics Reference
In-Depth Information
Animating using morph targets
When modeling 3D objects and characters, there are generally two different ways of
creating animations. You can animate using morph targets, or you can use skeleton-
and-bones-based animations. Three.js facilitates both of these approaches. In this re-
cipe, we'll look at the morph-based animation. With morph-based animations, like the
name implies, you morph one geometry shape into another. This works great for fa-
cial expressions and other very detailed animations.
Getting ready
For this recipe, we don't require any additional libraries as morph-based animations
are supported by the standard Three.js distribution. To make this recipe more un-
derstandable, we use an existing 3D model to demonstrate how morphing works.
You can see the model and the available morphs when you open the
07.02-animation-with-morphing.html
example in your browser. You will see
something similar to what is shown in the following screenshot:
In this example, you can see a simple model of a car. Using the sliders in the top-right
section, you can slowly morph this car into a different model, as shown in the follow-
ing screenshot:
