HTML and CSS Reference
In-Depth Information
The important parts of this code are in bold. The balls start out all red, and as they collide, they change
color. Before long, all are blue.
Important formulas in this chapter
The important formulas in this chapter are those for 3D perspective, coordinate rotation, and distance.
Basic perspective
scale = fl / (fl + zpos);
object.scaleX = object.scaleY = scale;
object.alpha = scale; // optional
object.x = vanishingPointX + xpos * scale;
object.y = vanishingPointY + ypos * scale;
Z-sorting
//assumes an array of 3D objects with a zpos property
function zSort (a, b) {
return (b.zpos - a.zpos);
}
objects.sort(zSort);
Coordinate rotation
x1 = xpos * cos(angleZ) - ypos * sin(angleZ);
y1 = ypos * cos(angleZ) + xpos * sin(angleZ);
x1 = xpos * cos(angleY) - zpos * sin(angleY);
z1 = zpos * cos(angleY) + xpos * sin(angleY);
y1 = ypos * cos(angleX) - zpos * sin(angleX);
z1 = zpos * cos(angleX) + ypos * sin(angleX);
3D distance
dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
Summary
You now have the basics of 3D under your belt, and you've seen most of the basic motion code adapted
for 3D. It's surprising how much of it is the same as the 2D animation code, but with an additional z
variable. It turns out that much of these examples were rather simple.
You use a lot of what you learned here in the next chapter, where you actually begin to sculpt 3D forms
with points and lines.
