HTML and CSS Reference
In-Depth Information
In the first example, we make the points black and with a diameter of 10 pixels. We create a few of these
points, rotate them based on the mouse position, and then draw lines between them. The code is almost
identical to the example
13-rotate-xy.html
from the previous chapter. The difference is that we add
some drawing code to the
move
function, and remove the
sortZ
function—because the depth of the
points does not matter when drawing a wire-frame model. Here's the code for document
01-lines-3d-
1.html
, and is shown in Figure 16-1:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lines 3d 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball3d.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
balls = [],
numBalls = 15,
fl = 250,
vpX = canvas.width / 2,
vpY = canvas.height / 2,
angleX, angleY; //referenced in drawFrame and move
for (var ball, i = 0; i < numBalls; i++) {
ball = new Ball3d(5, "#000000");
ball.xpos = Math.random() * 200 - 100;
ball.ypos = Math.random() * 200 - 100;
ball.zpos = Math.random() * 200 - 100;
balls.push(ball);
}
function rotateX (ball, angle) {
var cos = Math.cos(angle),
sin = Math.sin(angle),
y1 = ball.ypos * cos - ball.zpos * sin,
z1 = ball.zpos * cos + ball.ypos * sin;
ball.ypos = y1;
ball.zpos = z1;
}
function rotateY (ball, angle) {
var cos = Math.cos(angle),
sin = Math.sin(angle),
x1 = ball.xpos * cos - ball.zpos * sin,
