Animation and Physics - Three.js - page 309

Using morph animations created in

Blender

Creating morph animations by hand is difficult to do in Three.js. Simple transforma-
tions can probably be handled, but creating advanced animations programmatically is
very difficult. Luckily, there are a large number of external 3D programs that you can
use to create the models and animations. In this recipe, we'll use Blender, which we
already used in Chapter 2 , Geometries and Meshes , to create a morph-based anima-
tion and play it back using Three.js.

Getting ready

To use this recipe, you have to have Blender installed and enable the Three.js ex-
porter plugin. We've already explained how to do this in the Creating and exporting a
model from Blender recipe, in Chapter 2 , Geometries and Meshes . So if you haven't
already done so, you should first install Blender and then the Three.js export plugin.
Once you've installed Blender, you should create an animation that uses shape keys
to define various formats. Doing this is out of the scope of this topic, but to make sure,
you can test the steps explained in this recipe—we've included a Blender file, which
has a minimal shape-keys-based animation. So before we get started with the recipe,
we'll load the example Blender model.

For this, take the following steps:

1. Open Blender and navigate to File | Open .
2. In the window that opens, navigate to the sources provided with the topic
and open the simplemorph.blend file, which can be found in the assets/
models/blender directory.
3. Once this file is opened, you'll see a cube in the center of an empty scene like
this: