HTML and CSS Reference
In-Depth Information
position in the
triangles
array. So the faces at the bottom of the list always draw over the faces at the
top of the list, and you get bizarre, unpredictable results like this. You need to
cull
(get rid of) those back
faces, because you don't need to render them.
Backface culling is covered in detail in the next chapter, and you also learn how to apply some basic
lighting on each surface, based on its angle. But as a temporary fix for the rest of this chapter, in the
definition of the
Triangle
class, set the value of the
alpha
property to 0.5:
function Triangle (a, b, c, color) {
this.pointA = a;
this.pointB = b;
this.pointC = c;
this.color = (color === undefined) ? "#ff0000" : utils.parseColor(color);
this.lineWidth = 1;
this.alpha = 0.5;
}
Now you can see through any side of the cube, and makes the whole solid look like it's made from colored
glass. Again, this is a temporary workaround until we get to backface culling.
Figure 16-17 shows the finished 3D cube.
Figure 16-17.
The resulting 3D cube
Modeling other shapes
Now that you've mastered the spinning cube, you can model all kinds of shapes. Just draw them out on a
grid, mark up the points and triangles, and put them into the arrays. It often helps to draw several views of
the object, rotated so you can see each face and what points make up the triangles. This section offers a
few to get you started.
Pyramid
Here's the code for a 3D pyramid (which you can also find in
08-pyramid.html
), starting with the points:
points[0] = new Point3d( 0, -100, 0);
points[1] = new Point3d( 100, 100, -100);
points[2] = new Point3d(-100, 100, -100);
points[3] = new Point3d(-100, 100, 100);
points[4] = new Point3d( 100, 100, 100);
