HTML and CSS Reference
In-Depth Information
Creating 3D fills
As you might imagine, a large part of the work for fills has already been done. You already created the
points for a shape and connected them from one end to the other with a line. All you need to do is set the
context.fillStyle
and add
context.fill
to the drawing code. The code in the
05-filled-e.html
file does just that (see Figure 16-7 for the results). Here's the relevant section of
drawFrame
code with the
changes in bold:
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
angleX = (mouse.y - vpY) * 0.0005;
angleY = (mouse.x - vpX) * 0.0005;
points.forEach(move);
context.fillStyle = "#ff0000";
context.beginPath();
context.moveTo(points[0].getScreenX(), points[0].getScreenY());
points.forEach(draw);
context.closePath();
context.stroke();
context.fill();
}());
Figure 16-7.
First 3D fills
It's a good idea to understand how traditional 3D programs model shapes and solids. In the previous
examples, both the square and the letter E are
polygons.
A polygon is a closed shape made of at least
three vertices. Thus, a triangle is the simplest polygon. In many 3D modeling and rendering programs—
even those that use patches, meshes, NURBS, and complex polygons—all 3D forms are finally reduced to
a set of triangles just prior to being rendered.
