HTML and CSS Reference
In-Depth Information
this.y = y1;
};
Point3d.prototype.getScreenX = function () {
var scale = this.fl / (this.fl + this.z + this.cZ);
return this.vpX + (this.cX + this.x) * scale;
};
Point3d.prototype.getScreenY = function () {
var scale = this.fl / (this.fl + this.z + this.cZ);
return this.vpY + (this.cY + this.y) * scale;
};
To create a 3D point, you initialize the
Point3d
class by specifying its x, y, and z positions in 3D space.
The class also contains properties for its focal length, its vanishing point, and its center. You can rotate the
point around its center on any axis using the three rotate methods. The class also has methods to perform
all the perspective calculations for you. When you position and rotate the point, call
getScreenX
and
getScreenY
to return the coordinate of the point on the canvas element with all the perspective
calculations applied. Ready-built classes like this have been kept to a minimum in this topic, but this one
helps you understand the examples much easier over the next couple of chapters. Refactor the prior
rotating lines example using the new
Point3d
class and it becomes simple, as seen in
02-lines-3d-
2.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lines 3d 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="point3d.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
points = [],
numPoints = 50,
fl = 250,
vpX = canvas.width / 2,
vpY = canvas.height / 2,
angleX, angleY; //referenced in drawFrame and move
for (var point, i = 0; i < numPoints; i++) {
point = new Point3d(Math.random() * 200 - 100,
Math.random() * 200 - 100,
Math.random() * 200 - 100);
point.setVanishingPoint(vpX, vpY);
points.push(point);
