HTML and CSS Reference
In-Depth Information
} else {
ball.visible = false;
}
if (ball.visible) {
ball.draw(context);
}
}());
If the ball is not in front of us, there's no need to scale and position it. And if the ball isn't visible, there is no
need to draw it to the canvas.
Well, there you have it, the bare-bones basics of 3D. Not so painful, is it? Make sure you play around with
this example and get a good feel for it. In particular, change the value of
fl
and see how it affects how the
scene is rendered. This is the equivalent of changing the lens on a camera.
The rest of the chapter is devoted to programming the various motion effects covered in previous chapters,
but now in 3D.
Velocity and acceleration
Accomplishing velocity and acceleration in 3D is surprisingly easy. For 2D, you have
vx
and
vy
variables
to represent velocity on two axes. Now you just need to add the
vz
variable for the third dimension.
Similarly, if you have something such as
ax
and
ay
for acceleration, you add
az
.
You can modify the last exercise to make it work sort of like the earlier spaceship examples, but in 3D. It's
all keyboard-controlled now, with the cursor keys providing the thrust on the x and y axes, and the Shift
and Control keys used for z thrust. Here's the code for document
03-velocity-3d.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Velocity 3D</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
xpos = 0,
ypos = 0,
zpos = 0,
vx = 0,
vy = 0,
vz = 0,
