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 recipe, 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 facial 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 understandable, 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...