HTML and CSS Reference
In-Depth Information
x : -100
y : -100
z : 100
x : 100
y : -100
z : 100
x : -100
y : 100
z : 100
x : 100
y : 100
z : 100
Figure 16-3.
Coordinates of a square in 3D space
The z values are all the same because a square lies on a plane. The easiest way to keep the square on
the plane is to give all of its points the same measurement on one axis (here we chose the z-axis) and
define the square on the other two (x and y axes).
Here's the code that replaces the loop that created random points:
points[0] = new Point3d(-100, -100, 100);
points[1] = new Point3d( 100, -100, 100);
points[2] = new Point3d( 100, 100, 100);
points[3] = new Point3d(-100, 100, 100);
You then have to manually set the vanishing point for each point, which can be done by iterating over the
points
array:
points.forEach(function (point) {
point.setVanishingPoint(vpX, vpY);
});
The rest of the code should work fine, but make one more addition: a line to connect the last point with the
first, to close the shape. That's done with a call to
context.closePath
in the animation loop after the
other lines have been drawn. Here's the full code as found in
03-square-3d.html
(Figure 16-4 shows the
result):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Square 3d</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
