HTML and CSS Reference
In-Depth Information
Here, we add velocity for the x and y axis, as well as some gravity. We also do some fancy footwork to
detect multiple key presses by attaching a
keydown
and
keyup
event listener. When the key is pressed,
we set the acceleration on the appropriate axis to 1 or -1;then when that key is released, we set the
acceleration back to 0. The acceleration for each axis gets added to the velocity on that axis in the
drawFrame
animation loop. The left and right cursor keys were obvious choices for the x velocity, and we
use the spacebar for y. One interesting point is that we are
subtracting
gravity from
vy
. This is because we
want it to seem like the
viewer
is the one who is falling down to where the trees are, as shown in Figure
15-8. Really, the trees are “falling up” to where the viewpoint is, but it winds up looking the same. The y
position of the trees is limited to 50, which makes it look like you landed on the ground.
Figure 15-8.
Look, I'm flying!
There is nothing to limit movement on the x-axis, which means you can go off to the side of the forest if
you want. As an additional exercise, it wouldn't be too hard for you to set up some side boundaries.
Easing and springing
Easing and springing are also not much more complex in 3D than they are in 2D (the subject of Chapter
8). Just add another variable or two for the z-axis, and you're all set.
Easing
There's not a lot to cover on easing. In 2D, you have
tx
and
ty
as a target point. You just add
tz
for the z-
axis. On each animation frame, you measure the distance from the object to the target on each axis, and
move it a fraction of the way there.
Let's look at a simple example that eases an instance of
Ball3d
to a random target in 3D space. When
the ball arrives at the coordinate, it picks another target and moves there. Here's the code (document
10-
easing-3d.html
):
