We will now see if the basics of 3D plottins is as easy as the figure shown below and improve our HTML5 / Canvas experience

The model shown in at the top of this page was converted from .obj format into some javascript declarations then javascript/HTML5-Canvas code was written to render it and here's the result, it works !

ze code

var FocalLength = 3.5;

v = [
[154.715,328.255,0],
[154.715,221.137,-154.715],
[-154.715,221.137,-154.715],
[-154.715,328.255,0],
[-154.715,221.137,154.715],
[154.715,221.137,154.715],
[-154.715,323.782,0],
[154.715,323.782,0],
[154.715,216.664,-151.618],
[-154.715,216.664,-151.618],
[-154.715,216.664,151.618],
[154.715,216.664,151.618],
[-121.92,8.17035,121.92],
[121.92,8.17035,121.92],
[-121.92,238.019,121.92],
[121.92,238.019,121.92],
[-121.92,238.019,-121.92],
[121.92,238.019,-121.92],
[-121.92,8.17035,-121.92],
[121.92,8.17035,-121.92],
[-121.92,322.432,0],
[121.92,322.432,0],
[121.92,192.034,-44.1375],
[121.92,8.12182,-44.1375],
[121.92,192.034,44.1375],
[121.92,8.12182,44.1375],
[-56.9403,54.251,121.92],
[56.9403,54.251,121.92],
[56.9403,145.969,121.92],
[-56.9403,145.969,121.92],
[117.566,238.019,-117.566],
[117.566,8.17035,-117.566],
[-117.566,8.17035,-117.566],
[-117.566,238.019,-117.566],
[117.566,238.019,117.566],
[113.211,322.432,0],
[-117.566,8.17035,117.566],
[-117.566,238.019,117.566],
[-113.211,322.432,0],
[113.211,192.034,44.1375],
[113.211,192.034,-44.1375],
[117.566,8.17035,117.566],
[56.9403,54.251,113.211],
[-56.9403,54.251,113.211],
[56.9403,145.969,113.211],
[-56.9403,145.969,113.211],
[113.211,8.12182,44.1375],
[113.211,8.12182,-44.1375],
[-197.41,8.17035,197.41],
[197.41,8.17035,197.41],
[197.41,8.17035,-197.41],
[-197.41,8.17035,-197.41],
[-197.41,0,197.41],
[197.41,0,197.41],
[197.41,0,-197.41],
[-197.41,0,-197.41]
];

var mats = [];
var f = [];

mats[0] = red;
f[0] = [ 
[7,8,9,10],
[11,12,8,7],
[4,3,2,1],
[5,4,1,6],
[1,2,9,8],
[2,3,10,9],
[3,4,7,10],
[5,6,12,11],
[6,1,8,12],
[4,5,11,7]
];

mats[1] = litegray;
f[1] = [
[31,32,33,34],
[36,35,31],
[33,37,38,34],
[39,34,38],
[35,40,41,31],
[37,42,43,44],
[42,35,45,43],
[38,46,45,35],
[38,37,44,46],
[40,35,42,47],
[41,48,32,31],
[18,17,19,20],
[22,18,16],
[19,17,15,13],
[21,15,17],
[16,18,23,25],
[13,27,28,14],
[14,28,29,16],
[15,16,29,30],
[15,30,27,13],
[25,26,14,16],
[23,18,20,24],
[17,18,31,34],
[22,16,35,36],
[18,22,36,31],
[21,17,34,39],
[15,21,39,38],
[25,23,41,40],
[28,27,44,43],
[29,28,43,45],
[30,29,45,46],
[16,15,38,35],
[27,30,46,44],
[26,25,40,47],
[23,24,48,41]
];

mats[2] = beige;
f[2] = [
[56,53,54,55],
[49,52,51,50],
[49,50,54,53],
[50,51,55,54],
[51,52,56,55],
[52,49,53,56]
];

function drawFace( face, c0, c1, o0, o1, context )
{
	context.beginPath();
	vtx = v[face[0]-1];
	context.moveTo( o0 + vtx[c0], 400 - ( o1 + vtx[c1] ) );
	for( var i = 1; i < face.length; i++ )
	{
		vtx = v[face[i]-1];
		context.lineTo( o0 + vtx[c0], 400 - ( o1 + vtx[c1] ) );
	}
	vtx = v[face[0]-1];
	context.lineTo( o0 + vtx[c0], 400 - ( o1 + vtx[c1] ) );
	context.stroke();
}

function drawFace3D( face, context, obsPos )
{
	context.beginPath();
	vtx = project( obsPos, v[face[0]-1] )
	context.moveTo( vtx[0], 400 - vtx[1] );
	for( var i = 1; i < face.length; i++ )
	{
		vtx = project( obsPos, v[face[i]-1] );
		context.lineTo( vtx[0], 400 - vtx[1] );
	}
	vtx = project( obsPos, v[face[0]-1] );
	context.lineTo( vtx[0], 400 - vtx[1] );
	context.stroke();
}

function project( obsPos, v )
{
	var Zratio = FocalLength  / ( v[2] - obsPos[2] );
	var xy = [ Zratio * ( v[0] - obsPos[0] ), Zratio * ( v[1] - obsPos[1] ) ];
	xy[0] *= 200;
	xy[0] += 200;
	xy[1] *= 200;
	xy[1] += 200;
	return( xy );
}

jview( 'myCanvasTop', 0, 2, 200, 200 );
jview( 'myCanvasLeft', 2, 1, 200, 0 );
jview( 'myCanvasFront', 0, 1, 200, 0  );
rotateModel();
D3view3D( 'myCanvasX', [0,200,-1200] );
</script>