Animation and Physics - Three.js - page 311

You'll see an animating cube that uses morph targets (defined as shape keys
in Blender) to morph a cube into different shapes.
How to do it…
If you've followed the steps explained in the Getting ready section of this recipe,
you'll be looking at a simple Blender workspace with a single cube and an animation
that slowly morphs the cube using a set of shape keys. To export this animation from
Blender and use it in Three.js, we need to take a couple of steps:
1. The first thing we need to do is export the model and the animation to which
we can load it in Three.js. To do this, navigate to File | Export | Three.js .
2. In the window that opens, we can select a destination and a filename. For
this recipe, name the file simplemorph.js and set the destination to the
assets/models/morph folder.
3. Before we hit the Export button, we need to configure some Three.js-specific
properties. You can do this in the panel on the left-hand side in the Ex-
port Three.js section. In that section, make sure that the Morph animation
checkbox is selected. Once you've checked the box, click on the Export but-
ton.
4. Now we're done with our work in Blender and can load the exported model in
Three.js. For this, we use THREE.JSONLoader like this:
var loader = new THREE.JSONLoader();
loader.load("../assets/models/morph/
simplemorph.js",function(model){
...
});
In this code snippet, we load the model using THREE.JSONLoader .
5. Once the model is loaded, we need to create a material where we need to
set the morphTargets property to true :
var mat = new
THREE.MeshLambertMaterial({color:
0xff3333, morphTargets:true})