HTML and CSS Reference
In-Depth Information
}
function move (point) {
point.rotateX(angleX);
point.rotateY(angleY);
}
function draw (point, i) {
//ignore first point
if (i !== 0) {
context.lineTo(point.getScreenX(), point.getScreenY());
}
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
angleX = (mouse.y - vpY) * 0.001;
angleY = (mouse.x - vpX) * 0.001;
points.forEach(move);
context.beginPath();
//line starts at first point
context.moveTo(points[0].getScreenX(), points[0].getScreenY());
points.forEach(draw);
context.stroke();
}());
};
</script>
</body>
</html>
The main changes are in bold and you should be able to follow them pretty easily. Just remember to
include the correct path to new
point3d.js
file in your document.
Making shapes
Random lines look nice for demonstrations, but we can impose a bit of order on that mess. All you need to
do is get rid of the initial loop that created random x, y, and z values for the points and replace them with
specific, predetermined values. For example, let's make a square. Figure 16-3 shows the square you draw
and the 3D locations of its four corners.
