3D Game Programming

That is an incredible amount of JavaScript 3D programming. You have done

very well to make it this far, but we can do more.

First let’s take a closer look at that turn() function so we’re sure we understand

what’s going on there.

8.3 Breaking It Down

In the turn() function, why do we set the direction to values like Math.PI and

-Math.PI/2?

Recall from Geometry, on page 71, that angles, the amount of rotation, use

radians instead of degrees. The avatar starts facing backward, toward the

camera. So 0° of rotation is 0 radians of rotation, which means facing back-

ward. And 180° is pi radians, which means facing forward into the screen.

The following table is the complete list we’re using in the turn() function.

Direction Degrees Radians JavaScript

Forward 180° pi Math.PI

Right 90° pi ÷ 2 Math.PI/2

Left -90° -pi ÷ 2 -Math.PI/2

Backward 0° 0 0

Why rotation.y?

So that explains the number that we use for the direction variable in the function

turn(), but why do we set rotation.y? Why not rotation.z or rotation.x?

Well, for one thing, we already change rotation.x when we do cartwheels and

rotation.z when we flip.

We set the rotation.y because we want to spin the avatar around the y-axis.

Recall that, in 3D, the y-axis is pointing up and down. If you imagine a pole

sticking right up the middle of the avatar, that is the avatar’s y-axis:

report erratum • discuss

Breaking It Down • 81

Prepared exclusively for Michael Powell