O'Reilly logo

Three.js Essentials by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Working with morph-based animations in Three.js

With skeletal-based animations, we move the model around based on the position and rotation of its individual bones. This provides you with a lot of flexibility but becomes very complex for detailed animations such as facial expressions, which aren't bone-based. With morph-based animations, you don't work with bones but simply define the various states of the model (by moving the vertices around), and you let Blender (or Three.js) fill in the missing steps between these model states. Morph-based animations, for example, are often used to model facial expressions.

Exploring the model and exporting it to Three.js

In this example, we're going to create a morph-based animation where the monkey we saw in ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required