HTML and CSS Reference
In-Depth Information
Chapter 16
3D Lines and Fills
What we'll cover in this chapter:
Creating points and lines
Making shapes
Creating 3D fills
Modeling 3D solids
Moving 3D solids
The last chapter introduced 3D, but the objects were only positioned in 3D space by calculating their size
and screen position—the objects themselves were actually 2D. If you were to move your viewpoint position
in this space, the object would always seem to turn and face you. However, that object is not turning. It
only appears to turn because, as a 2D object, it's the only view you have of it.
In this chapter, we construct 3D models that are rendered using the canvas drawing API. In particular, we
look at how to create and use 3D points, lines, fills, and solids. By the end of this chapter, you'll be able to
create a variety of shapes, move them, and rotate them, all in 3D.
Creating points and lines
Since a point, by definition, is invisible because it has no dimension, it doesn't make sense to create points
in 3D without making lines in 3D to connect them. But to start with, you continue to use an instance of the
Ball3d
class—with a small radius—as a point so you can see where it is. From there, you draw lines to
connect the balls. You already did similar things, but now the points have perspective applied to them, to
put them in a 3D space.