Graphics Reference
In-Depth Information
Animating with skeletons
A common way to animate complex models is using bones and skinning. In this ap-
proach, 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 de-
formed 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
this recipe in action, which you can view by opening the
07.03-animation-with-
skeleton.html
example in your browser. You will see something similar to what is
shown in the following screenshot:
This example shows you a model of a giraffe and provides an interface that you can
use to move the neck bone. You can change the rotation of the neck bone and even
its position. When you do this, you'll see that part of the mesh responds to the move-
ment of this bone. In this recipe, we'll show you how to accomplish this for yourself.
How to do it…
Working directly with bones isn't that difficult and only takes a couple of small steps:
