worry about arms and legs to connect the hands and feet to the body—that
would make it harder in later chapters.And, of course, you can make whatever kind of avatar you like. Just remember
to make one with hands and feet—we’ll need them in later chapters.3.6 Doing Cartwheels
We’ll add controls to our avatar later. But before moving on to the next lesson,
let’s make the avatar do some flips and cartwheels.Just like we did at the end of Chapter 1, Project: Creating Simple Shapes, on
page 1, we start by changing the very last line of the code (which is just
above the </script>) tag at the end of the editor. Instead of telling the browser
to show the scene one time, we animate the scene as follows.// Now, animate what the camera sees on the screen:
functionanimate() {
requestAnimationFrame(animate);
avatar.rotation.z = avatar.rotation.z + 0.05;
renderer.render(scene, camera);
}
animate();If you typed everything correctly, you might notice something odd. Just the
head is spinning, not the whole avatar.That might be a cool effect, but it’s not what we wanted. So how do we go
about spinning the whole avatar?If you guessed that we add rotation.z changes to the hands and feet, you made
a good guess. But that won’t work. The hands and feet would spin in place
just like the head.The answer to this problem is a very powerful 3D-programming technique.
We group all of the body parts together and spin the group. It is a simple idea,
but, as you’ll find later, it’s surprisingly powerful.To group the body parts together, we add the parts to the avatar instead of
the scene.Chapter 3. Project: Making an Avatar • 32
Prepared exclusively for Michael Powell report erratum • discuss