<html>
<head>
<script language="javascript"><!--
var DrawingContext=0;
var Canvas=0;
var XLast=0;
var YLast=0;
var Dragging=false;
var XAngle=0.5;
var YAngle=0.5;
var ZAngle=0;
var ScaleFactor=4;
var Vertices=new Array();
var Edges=new Array();
var VerticesCount=0;
var EdgesCount=0;
var CubeVertices=new Array();
function Vector(x, y, z)
{
this.x=x;
this.y=y;
this.z=z;
}
function Vertex(Point)
{
this.Point=Point;
this.u=0;
this.v=0;
}
function Edge(Begin, End)
{
this.Begin=Begin;
this.End=End;
}
function Translate(Point, Translation)
{
return new Vector
(
Point.x+Translation.x,
Point.y+Translation.y,
Point.z+Translation.z
);
}
function Scale(Point, Factor)
{
return new Vector
(
Point.x*Factor,
Point.y*Factor,
Point.z*Factor
);
}
function AddVertex(Origin, Point, Size)
{
Vertices[VerticesCount]=
new Vertex(Translate(Scale(Point, Size), Origin));
return VerticesCount++;
}
function AddEdge(Begin, End)
{
Edges[EdgesCount++]=
new Edge(CubeVertices[Begin], CubeVertices[End]);
}
// Constructs 3D-model of the cube.
function AddCube(Size)
{
var x=0;
var y=0;
var z=0;
var i=0;
var Origin=new Vector(-25, -25, -25);
for(x=0; x<2; x++) for(y=0; y<2; y++) for(z=0; z<2; z++)
CubeVertices[i++]=AddVertex(Origin, new Vector(x, y, z), Size);
AddEdge(0, 1); AddEdge(0, 2); AddEdge(0, 4); AddEdge(1, 3);
AddEdge(1, 5); AddEdge(2, 3); AddEdge(2, 6); AddEdge(3, 7);
AddEdge(4, 5); AddEdge(4, 6); AddEdge(5, 7); AddEdge(6, 7);
}
// Allows interactive, "moused" rotation.
function MoveHandler(Data)
{
var dx=XLast?Data.pageX-XLast:0;
var dy=YLast?Data.pageY-YLast:0;
XLast=Data.pageX;
YLast=Data.pageY;
if(Dragging)
{
XAngle+=dy*0.01;
YAngle+=dx*0.01;
}
return true;
}
function DownHandler()
{
Dragging=true;
return true;
}
function UpHandler()
{
Dragging=false;
return true;
}
// Performs initialization of canvas, event
// handlers, and world geometry.
function Initialize()
{
Canvas=document.getElementById("Canvas");
DrawingContext=Canvas.getContext("2d");
DrawingContext.strokeStyle="#009900";
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEDOWN);
document.captureEvents(Event.MOUSEUP);
document.onmousemove=MoveHandler;
document.onmousedown=DownHandler;
document.onmouseup=UpHandler;
AddCube(50);
// Visualize scene periodically.
setInterval("Render()", 20);
}
// Mapping from world- to screen-coordinates (with
// applying appropriate world transformation).
function Project(Vertex)
{
var sinx=Math.sin(XAngle);
var siny=Math.sin(YAngle);
var sinz=Math.sin(ZAngle);
var cosx=Math.cos(XAngle);
var cosy=Math.cos(YAngle);
var cosz=Math.cos(ZAngle);
var x=Vertex.Point.x;
var y=Vertex.Point.y;
var z=Vertex.Point.z;
var yx=y*cosx+z*sinx;
var zx=z*cosx-y*sinx;
var xy=x*cosy+zx*siny;
var zy=zx*cosy-x*siny;
var xz=xy*cosz+yx*sinz;
var yz=yx*cosz-xy*sinz;
Vertex.u=Canvas.width/2+xz*ScaleFactor;
Vertex.v=Canvas.height/2+yz*ScaleFactor;
}
function Render()
{
var i=0;
DrawingContext.clearRect(0,0,500,500);
DrawingContext.beginPath();
// Project all vertices.
for(i=0; i<VerticesCount; i++)
Project(Vertices[i])
// Draw all edges.
for(i=0; i<EdgesCount; i++)
{
var Begin=Vertices[Edges[i].Begin];
var End=Vertices[Edges[i].End];
DrawingContext.moveTo(Begin.u, Begin.v);
DrawingContext.lineTo(End.u, End.v);
}
DrawingContext.stroke();
}
//--></script>
</head>
<body onload="Initialize()">
<center>
<canvas id="Canvas" width="500" height="500">
</canvas>
</center>
</body>
</html>
