3D Heightmap Test

<html>
<head>
<style>
#cvs
{
    border:1px solid;
}
</style>
<script>
function Point (x,y,z)
{
    this.x = x;
    this.y = y;
    this.z = z;
}
function Sprite(mesh,rot)
{
    this.mesh = mesh;
    this.rot = rot;
}
function Camera(pos,rot)
{
    this.pos = pos;
    this.rot = rot;
}
function Rotate(point,rot)
{
    var ox=0,oy=1,oz=2;
    var s=[Math.sin(rot.x),Math.sin(rot.y),Math.sin(rot.z)];
    var c=[Math.cos(rot.x),Math.cos(rot.y),Math.cos(rot.z)];
    var x = point.x;
    var y = point.y;
    var z = point.z;
    var dx = c[oy]*(s[oz]*y+c[oz]*x)-s[oy]*z;
    var dy = s[ox]*(c[oy]*z+s[oy]*(s[oz]*y+c[oz]*x))+c[ox]*(c[oz]*y-s[oz]*x);
    var dz = c[ox]*(c[oy]*z+s[oy]*(s[oz]*y+c[oz]*x))-s[ox]*(c[oz]*y-s[oz]*x);
    return new Point(dx,dy,dz);
}
function Project(sprite,cam,Dim,perp)
{
    var ox=0,oy=1,oz=2;
    var s=[Math.sin(cam.rot.x),Math.sin(cam.rot.y),Math.sin(cam.rot.z)];
    var c=[Math.cos(cam.rot.x),Math.cos(cam.rot.y),Math.cos(cam.rot.z)];
    var cx=cam.pos.x
    var cy=cam.pos.y
    var cz=cam.pos.z
    var P = [];
    for(var i=0; i<sprite.mesh.length; i++)
    {
        var point = Rotate(sprite.mesh[i],sprite.rot);
        var x = point.x-cx;
        var y = point.y-cy;
        var z = point.z-cz;
        var dx = c[oy]*(s[oz]*y+c[oz]*x)-s[oy]*z;
        var dy = s[ox]*(c[oy]*z+s[oy]*(s[oz]*y+c[oz]*x))+c[ox]*(c[oz]*y-s[oz]*x);
        var dz = c[ox]*(c[oy]*z+s[oy]*(s[oz]*y+c[oz]*x))-s[ox]*(c[oz]*y-s[oz]*x);
        P[i] = new Point(perp/dz*dx+Dim.width/2,perp/dz*dy+Dim.height/2);
    }
    return P;
}


var sprite = new Sprite([],new Point(
Math.sin(0*180/Math.PI),
Math.sin(0*180/Math.PI),
Math.sin(0*180/Math.PI)));
var camera = new Camera(new Point(0,0,1000),new Point(0,0,0));
var perspective = 1000;
var cvs,G,Dim,active;
var img = new Image();
function loadMesh()
{
    G.drawImage(img,0,0);
    var imgData = G.getImageData(0,0,img.width,img.height);
    for(var i=2; i<imgData.width; i+=2)
    {
        for(var j=2; j<imgData.height; j+=2)
        {
            sprite.mesh[sprite.mesh.length] = new Point(i*3-200,200-j*3,(255-imgData.data[(i+imgData.width*j)*4+1])/3);
            sprite.mesh[sprite.mesh.length] = new Point((i-2)*3-200,200-j*3,(255-imgData.data[((i-2)+imgData.width*j)*4+1])/3);
            sprite.mesh[sprite.mesh.length] = new Point((i-2)*3-200,200-(j-2)*3,(255-imgData.data[((i-2)+imgData.width*(j-2))*4+1])/3);
            sprite.mesh[sprite.mesh.length] = new Point(i*3-200,200-(j-2)*3,(255-imgData.data[(i+imgData.width*(j-2))*4+1])/3);
        }
    }
    webkitRequestAnimationFrame(draw);
}

function init()
{
    cvs = document.getElementById("cvs");
    G = cvs.getContext("2d");
    Dim = {width:cvs.width,height:cvs.height};
    img.addEventListener("load",loadMesh,false);
    img.src="data:image/jpeg;base64,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";
}
function draw()
{
    sprite.rot.x+=0.001;
    sprite.rot.y+=0.002;
    sprite.rot.z+=0.003;
    G.clearRect(0,0,Dim.width,Dim.height);
    var points = Project(sprite,camera,Dim,perspective);
    G.beginPath();
    for(var i=0; i<points.length; i++)
    {
        G.lineTo(points[i].x,points[i].y);
    }
    G.stroke();
    if(active)webkitRequestAnimationFrame(draw);
}
function activate(CB)
{
    active = CB.checked;
    if(active)webkitRequestAnimationFrame(draw);
}
function mouse(e)
{
    sprite.rot.y=e.offsetX/100;
    sprite.rot.x=e.offsetY/100;
    webkitRequestAnimationFrame(draw);
}
</script>
</head>
<body>
<canvas width="800" height="800" id="cvs" onmousemove="mouse(event)"></canvas><br>
<script>
init();
</script>
<input type="checkbox" onclick="activate(this)" />Rotate
</body>
</html>