In addition to setting all three numbers for the position, we can change just
one of the positions by updating position.x, position.y, or position.z. To move the
right hand forward (toward the viewer), add the position.z line shown.varright_hand =newTHREE.Mesh(hand, cover);
right_hand.position.set(-150, 0, 0);
avatar.add(right_hand);
right_hand.position.z = 100;Change the value of position.z from 100 to -100. What happens? What happens
if you keep changing between 100 and -100?When z is 100, the hand is moved forward.
When z is -100, the hand has moved backward so that we almost cannot see
the hand behind the body.And when you change position.z back and forth between -100 and 100, it’s
almost like the hand is swinging back and forth. Congrats! You just learned
a famous animation technique!In some games, it’s enough to move a thing from one place to another place
to make it seem like it’s moving. But we can do better in our game.Start by removing the line that sets the position.z. We don’t want to set it once.
We want to animate it. So, after removing that line, move to the animate()
function. After Chapter 4, Project: Moving Avatars, on page 35, we’re already
animating cartwheels and flips.varis_cartwheeling = false;
varis_flipping = false;
functionanimate() {
requestAnimationFrame(animate);
if(is_cartwheeling) {
avatar.rotation.z = avatar.rotation.z + 0.05;
}Chapter 6. Project: Moving Hands and Feet • 60
Prepared exclusively for Michael Powell report erratum • discuss