You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.0 KiB
99 lines
2.0 KiB
<html><head>
|
|
<title>Simple 3D on HTML5 canvas</title>
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
|
|
<script type="text/javascript">
|
|
|
|
function setup()
|
|
{
|
|
|
|
|
|
var fov = 250;
|
|
|
|
var SCREEN_WIDTH = 600;
|
|
var SCREEN_HEIGHT = 300;
|
|
|
|
var HALF_WIDTH = SCREEN_WIDTH/2;
|
|
var HALF_HEIGHT = SCREEN_HEIGHT/2;
|
|
|
|
var numPoints = 1000;
|
|
|
|
|
|
function draw3Din2D(point3d)
|
|
{
|
|
x3d = point3d[0];
|
|
y3d = point3d[1];
|
|
z3d = point3d[2];
|
|
var scale = fov/(fov+z3d);
|
|
var x2d = (x3d * scale) + HALF_WIDTH;
|
|
var y2d = (y3d * scale) + HALF_HEIGHT;
|
|
|
|
|
|
c.lineWidth= scale;
|
|
c.strokeStyle = "rgb(255,255,255)";
|
|
c.beginPath();
|
|
c.moveTo(x2d,y2d);
|
|
c.lineTo(x2d+scale,y2d);
|
|
c.stroke();
|
|
|
|
}
|
|
|
|
var canvas = document.getElementById('Canvas2D');
|
|
var c = canvas.getContext('2d');
|
|
|
|
var points = [];
|
|
|
|
function initPoints()
|
|
{
|
|
for (i=0; i<numPoints; i++)
|
|
{
|
|
point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
|
|
points.push(point);
|
|
}
|
|
|
|
}
|
|
|
|
function render()
|
|
{
|
|
|
|
c.fillStyle="rgb(0,0,0)";
|
|
c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
|
|
|
|
for (i=0; i<numPoints; i++)
|
|
{
|
|
point3d = points[i];
|
|
|
|
z3d = point3d[2];
|
|
z3d-=4;
|
|
if(z3d<-fov) z3d +=400;
|
|
point3d[2] = z3d;
|
|
|
|
|
|
draw3Din2D(point3d);
|
|
|
|
}
|
|
}
|
|
|
|
initPoints();
|
|
|
|
var loop = setInterval(function(){render();}, 50);
|
|
|
|
}
|
|
|
|
</script>
|
|
<style type="text/css">
|
|
body{background:#000;color:#fff;font-family:arial;font-size:90%;}
|
|
.wrap{width:640px; margin:0 auto;}
|
|
canvas{border: 1px solid #0f0;}
|
|
a{color:#0f0;}
|
|
</style>
|
|
</head><body onload="setup();">
|
|
<div class="wrap">
|
|
<canvas id="Canvas2D" width="600" height="300">Internet Explorer Not Supported :(</canvas>
|
|
<h1>Simple 3D HTML5 Canvas</h1>
|
|
<p>By <a href="http://sebleedelisle.com">Seb Lee-Delisle</a></p>
|
|
<p>Simple 3D on HTML5 Canvas, as demoed at BarCampBrighton4. More info at <a href="http://www.sebleedelisle.com/2009/09/simple-3d-in-html5-canvas">sebleedelisle.com</a>. </p>
|
|
</div>
|
|
|
|
</body></html>
|