How to draw 3d Objects ?
3d is based on rotation and projection on 2d plan.
Computer computes rotation around x,y or z and then apply projection on one plan
Rotation required notion of Linear Algebra
function rotationPtsX(pts,theta) { var result = new Array(); result[0]=pts[0]; result[1]=pts[2]*Math.sin(theta)+pts[1]*Math.cos(theta); result[2]=pts[2]*Math.cos(theta)-pts[1]*Math.sin(theta); return result; } function rotationPtsY(pts,theta) { var result = new Array(); result[0]=pts[0]*Math.cos(theta)-pts[2]*Math.sin(theta); result[1]=pts[1]; result[2]=pts[0]*Math.sin(theta)+pts[2]*Math.cos(theta); return result; } function drawline(canvas, pts1, pts2, theta1,theta2) { var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; pts1Temp1=rotationPtsX(pts1 ,theta1); pts1Temp2=rotationPtsY(pts1Temp1 ,theta2); pts2Temp1=rotationPtsX(pts2 ,theta1); pts2Temp2=rotationPtsY(pts2Temp1 ,theta2); context.moveTo(pts1Temp2[0]+centerX, pts1Temp2[1]+centerY); context.lineTo(pts2Temp2[0]+centerX, pts2Temp2[1]+centerY); } function draw(canvas, time, ptsList) { var context = canvas.getContext("2d"); theta1=time%60000/2000; theta2=time%60000/2500; // clear context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); for (i=0;i<ptsList.length;i=i+2) { drawline(canvas,ptsList[i],ptsList[i+1],theta1,theta2); } context.stroke(); } function animate(canvas,ptsList){ // update var date = new Date(); var time = date.getTime(); // draw draw(canvas, time, ptsList); setTimeout(function(){ animate(canvas,ptsList); } ,1000/24); } window.onload = function(){ var canvas = document.getElementById("myCanvas"); ptsList= new Array(); ptsList[0] = new Array(); ptsList[0][0] = 50; ptsList[0][1] = 50; ptsList[0][2] = 50; ptsList[1]= new Array(); ptsList[1][0] = 50; ptsList[1][1] = 50; ptsList[1][2] = -50; ptsList[2]= new Array(); ptsList[2][0] = -50; ptsList[2][1] = 50; ptsList[2][2] = 50; ptsList[3]= new Array(); ptsList[3][0] = -50; ptsList[3][1] = 50; ptsList[3][2] = -50; ptsList[4]= new Array(); ptsList[4][0] = 50; ptsList[4][1] = -50; ptsList[4][2] = 50; ptsList[5]= new Array(); ptsList[5][0] = 50; ptsList[5][1] = -50; ptsList[5][2] = -50; ptsList[6]= new Array(); ptsList[6][0] = -50; ptsList[6][1] = -50; ptsList[6][2] = 50; ptsList[7]= new Array(); ptsList[7][0] = -50; ptsList[7][1] = -50; ptsList[7][2] = -50; i=8; ptsList[i] = new Array(); ptsList[i][0] = 50; ptsList[i][1] = 50; ptsList[i][2] = 50; i++; ptsList[i]= new Array(); ptsList[i][0] = 50; ptsList[i][1] = -50; ptsList[i][2] = 50; i++; ptsList[i]= new Array(); ptsList[i][0] = 50; ptsList[i][1] = -50; ptsList[i][2] = 50; i++; ptsList[i]= new Array(); ptsList[i][0] = -50; ptsList[i][1] = -50; ptsList[i][2] = 50; i++; ptsList[i] = new Array(); ptsList[i][0] = -50; ptsList[i][1] = -50; ptsList[i][2] = 50; i++; ptsList[i]= new Array(); ptsList[i][0] = -50; ptsList[i][1] = 50; ptsList[i][2] = 50; i++; ptsList[i]= new Array(); ptsList[i][0] = -50; ptsList[i][1] = 50; ptsList[i][2] = 50; i++; ptsList[i]= new Array(); ptsList[i][0] = 50; ptsList[i][1] = 50; ptsList[i][2] = 50; i++; ptsList[i] = new Array(); ptsList[i][0] = 50; ptsList[i][1] = 50; ptsList[i][2] = 50; i++; ptsList[i]= new Array(); ptsList[i][0] = 50; ptsList[i][1] = -50; ptsList[i][2] = 50; i++; ptsList[i]= new Array(); ptsList[i][0] = 50; ptsList[i][1] = -50; ptsList[i][2] = -50; i++; ptsList[i]= new Array(); ptsList[i][0] = -50; ptsList[i][1] = -50; ptsList[i][2] = -50; i++; ptsList[i] = new Array(); ptsList[i][0] = -50; ptsList[i][1] = -50; ptsList[i][2] = -50; i++; ptsList[i]= new Array(); ptsList[i][0] = -50; ptsList[i][1] = 50; ptsList[i][2] = -50; i++; ptsList[i]= new Array(); ptsList[i][0] = -50; ptsList[i][1] = 50; ptsList[i][2] = -50; i++; ptsList[i]= new Array(); ptsList[i][0] = 50; ptsList[i][1] = 50; ptsList[i][2] = -50; i++; ptsList[i] = new Array(); ptsList[i][0] = 50; ptsList[i][1] = 50; ptsList[i][2] = -50; i++; ptsList[i]= new Array(); ptsList[i][0] = 50; ptsList[i][1] = -50; ptsList[i][2] = -50; animate(canvas,ptsList); };