Three.js Cookbook

Animating with skeletons

A common way to animate complex models is using bones and skinning. In this approach, we define a geometry, add a skeleton, and tie the geometry to that skeleton. Whenever we move or rotate one of the bones of the skeleton, the geometry is deformed accordingly. In this recipe, we will show you how you can use the Three.js functionality to move and rotate bones directly from JavaScript.

Getting ready

For this recipe, we use an external model that already contains a skeleton we can move around. To load this model, we use THREE.JSONLoader, which is available in the standard distribution of Three.js. So, we don't need to import any additional JavaScript files to get this recipe to work. Of course, we've provided an example of ...