Graphics Reference
In-Depth Information
1. The first thing we need to do is load a model that contains bones. For this
recipe, we once again use
THREE.JSONLoader
:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load("../assets/models/bones/
giraffe.js",function(model, materials) {
...
});
2. Once the model from step 1 has been loaded, we can set up the materials
and create the mesh. Let's first look at the materials:
materials.forEach(function(mat) {
mat.skinning = true;
});
Here, we set the
skinning
property of the material to
true
. This tells
Three.js that this object contains bones and the geometry should deform
when the bones move.
3. Next, we create the mesh and add it to the scene:
var giraffe = new
THREE.SkinnedMesh(model, materials[0]);
scene.add(giraffe);
As you can see, we've used a different kind of mesh for this object. Instead
of the
THREE.Mesh
object, we've used a
THREE.SkinnedMesh
object.
4. To access the bones, we access the children elements of
THREE.SkinnedMesh
. Getting the correct bone to animate might take some
experimenting if the bones aren't clearly named. The easiest way to determ-
ine which bone to use is to look through the output of the JavaScript console
and browse the children of the mesh.
