HTML and CSS Reference
In-Depth Information
var bc = {
x: this.pointB.x - this.pointC.x,
y: this.pointB.y - this.pointC.y,
z: this.pointB.z - this.pointC.z
};
var norm = {
x: (ab.y * bc.z) - (ab.z * bc.y),
y:-((ab.x * bc.z) - (ab.z * bc.x)),
z: (ab.x * bc.y) - (ab.y * bc.x)
};
var dotProd = norm.x * this.light.x +
norm.y * this.light.y +
norm.z * this.light.z;
var normMag = Math.sqrt(norm.x * norm.x +
norm.y * norm.y +
norm.z * norm.z);
var lightMag = Math.sqrt(this.light.x * this.light.x +
this.light.y * this.light.y +
this.light.z * this.light.z);
return (Math.acos(dotProd / (normMag * lightMag)) / Math.PI) *
this.light.brightness;
};
And here's the code for example
03-extruded-a-light.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Extruded A Light</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 src="triangle.js"></script>
<script src="light.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
light = new Light(),
points = [],
triangles = [],
fl = 250,
vpX = canvas.width / 2,
vpY = canvas.height / 2,
angleX, angleY; //referenced in drawFrame and move
//first set
points[0] = new Point3d( -50, -250, -50);
points[1] = new Point3d( 50, -250, -50);
