HTML and CSS Reference
In-Depth Information
7
6
4, 7, 6
4, 6, 5
4
5
Figure 16-16. The back face of the cube
Moving to each cube face, you come up with the following triangle definitions:
//front
triangles[0] = new Triangle(points[0], points[1], points[2], "#6666cc");
triangles[1] = new Triangle(points[0], points[2], points[3], "#6666cc");
//top
triangles[2] = new Triangle(points[0], points[5], points[1], "#66cc66");
triangles[3] = new Triangle(points[0], points[4], points[5], "#66cc66");
//back
triangles[4] = new Triangle(points[4], points[6], points[5], "#cc6666");
triangles[5] = new Triangle(points[4], points[7], points[6], "#cc6666");
//bottom
triangles[6] = new Triangle(points[3], points[2], points[6], "#cc66cc");
triangles[7] = new Triangle(points[3], points[6], points[7], "#cc66cc");
//right
triangles[8] = new Triangle(points[1], points[5], points[6], "#66cccc");
triangles[9] = new Triangle(points[1], points[6], points[2], "#66cccc");
//left
triangles[10] = new Triangle(points[4], points[0], points[3], "#cccc66");
triangles[11] = new Triangle(points[4], points[3], points[7], "#cccc66");
Each face has a different color, because the two triangles that make up the face are the same color.
Again, this clockwise orientation doesn't matter right now, but in the next chapter, you use this for backface
culling. This term refers to a way of determining which surfaces are facing you and which are facing away.
You see why this is important in a moment.
The 07-cube.html example is the same as 06-triangles.html , with these new point and triangle
definitions at the top of the script.
Run this in your browser, and … it's all messed up! You can see some of the back faces, some of the time.
Other faces seem invisible all the time. What's going on? Well, the faces on the back of the cube (the back
faces) are always being drawn. And the triangles are being drawn in the same order, based on their
Search WWH ::




Custom Search