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.
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...