Animation and Physics - Three.js - page 302

How it works…
In models that support multiple morph targets, an additional set of vertices is stored
to represent that position for each of the targets. So, if you've got a face model that
has a morph target for a smile, one for a frown, and one for a smirk, you effectively
store four times as many vertex positions. With the morphTargetInfluences
property, you can tell Three.js how far the base state (the geometry.vertices
property) should be morphed toward that specific morph target. Three.js will then cal-
culate the average position of each individual vertex and render the updated model.
A very interesting thing is that you can combine morph targets. So if you've got sep-
arate morph targets for eye movement and mouth movement, you can easily create
very animated and lifelike animations.
There's more…
In this recipe, we loaded an external model that contained the morph targets. If
you've already got a simple geometry that you want to use for morph-based anim-
ations, you can also easily do that. For instance, if you've got a geometry, you can
add morphTargets using the following code:
cubeGeometry.morphTargets[0] = {name: 't1',
vertices:cubeTarget2.vertices};
cubeGeometry.morphTargets[1] = {name: 't2',
vertices:cubeTarget1.vertices};
The important aspect here is to make sure you provide the same amount of vertices
to the vertices property as there are in the initial geometry. You can now con-
trol the morph between the various targets using the morphTargetInfluences
properties on THREE.Mesh :
cube.morphTargetInfluences[0] = 0.4;
cube.morphTargetInfluences[1] = 0.6;