Learn Three.js - Third Edition

Animation with morph targets

Morph targets are the most straightforward way of defining an animation. You define all the vertices for each important position (also called keyframes) and tell Three.js to move the vertices from one position to the other. The disadvantage of this approach, though, is that for large meshes and large animations, the model files will become very large. The reason is that for each key position, all the vertex positions are repeated.

We'll show you how to work with morph targets using two examples. In the first example, we'll let Three.js handle the transition between the various keyframes (or morph targets as we'll call them from now on), and in the second one, we'll do this manually. Keep in mind that we only scratch ...