HTML and CSS Reference
In-Depth Information
Figure 16-19.
An extruded letter A
As you can see, triangles build up quickly when you create 3D models. The original, flat, A had 11
triangles. Extruding it somehow quadrupled that! This code still runs pretty smoothly, but you aren't going
to get any massive 3D worlds with thousands of polygons by drawing them out on the canvas element this
way. Still, you can do some pretty cool things. And with web browsers improving in performance with each
release, and new technologies like WebGL on the horizon, who knows what the future holds?
Cylinder
Here's one more shape example, and this time we'll create points and triangles with some math. The only
thing we change in this example,
10-cylinder.html
, is at the top of the script. Instead of defining points
and triangles by hand, we create an algorithm to do it for us and make a cylinder. Here's that portion of the
code:
var points = [],
numFaces = 20;
for (var angle, xpos, ypos, i = 0, idx = 0; i < numFaces; i++) {
angle = Math.PI * 2 / numFaces * i;
xpos = Math.cos(angle) * 200;
ypos = Math.sin(angle) * 200;
points[idx] = new Point3d(xpos, ypos, -100);
points[idx+1] = new Point3d(xpos, ypos, 100);
idx += 2;
}
points.forEach(function (point) {
point.setVanishingPoint(vpX, vpY);
point.setCenter(0, 0, 200);
});
for (i = 0, idx = 0; i < numFaces - 1; i++) {
triangles[idx] = new Triangle(points[idx], points[idx+3], points[idx+1], "#6666cc");
triangles[idx+1] = new Triangle(points[idx], points[idx+2], points[idx+3], "#6666cc");
idx += 2;
}
