3D Lines and Fills - HTML5 Animation with JavaScript - page 399

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;
};
The center z value ( this.cZ ) is added to the z position ( this.z ) when the scale is calculated, effectively
pushing the point out into the distance without altering the z position itself.
The same thing happens with this.cX and this.cY . They are added to the x and y positions, and then
the scale is applied. This pushes the point off in one of those directions, without permanently altering its
position. Because we are not changing any of these values, the point—and thus the larger shape that it is
part of—continues to rotate around its own center, rather than orbiting around the center of the 3D
coordinate space for our scene.
Let's see this in action. Go back to the 07-cube.html example, and add two variables at the top of the
script:
var offsetX = 0,
offsetY = 0;
Now add a keydown event handler to change the offset using the arrow keys:
window.addEventListener('keydown', function (event) {
if (event.keyCode === 37) { //left
offsetX = -5;
} else if (event.keyCode === 39) { //right
offsetX = 5;
} else if (event.keyCode === 38) { //up
offsetY = -5;
} else if (event.keyCode === 40) { //down
offsetY = 5;
}
points.forEach(function (point) {
point.x += offsetX;
point.y += offsetY;
});
}, false);
This loops through each point and adds or subtracts 5 from its value (you can find the complete file in 11-
move-cube-1.html ). Because the actual positions of all the points are changing, the model now orbits
around the center of the 3D space. This might or might not be what you want it to do. If you want to move
the whole model, and still have it rotate around its own center, you need to use the point's setCenter
method. Change the event handler code we just added to the following:
window.addEventListener('keydown', function (event) {
if (event.keyCode === 37) { //left
offsetX -= 5;
} else if (event.keyCode === 39) { //right
offsetX += 5;