# 3D Cube Drawing

## In this example below you will see how to do a 3D Cube Drawing with some HTML / CSS and Javascript

This awesome code was written by arcollector, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
• HTML
• CSS
• JavaScript
<div class="viewport">
<canvas class="viewport-canvas"></canvas>
</div>

html {
background: #ddd;
}
.viewport {
margin: 10px auto;
border: 1px solid #ccc;
width: 320px;
height: 200px;
}
.viewport > canvas {
width: 320px;
height: 200px;
background: #000;
}

var cube3D = [
[-30,30,-30], [30,30,-30], [30,30,30], [-30,30,30], [-30,30,-30], // bottom
[30,30,30], [30,30,-30], [30,-30,-30], [30,-30,30], [30,30,30], // left
[-30,30,30], [30,30,30], [30,-30,30], [-30,-30,30], [-30,30,30], // right
[30,-30,30], [30,-30,-30], [-30,-30,-30], [-30,-30,30], [30,-30,30], // top
[30,30,-30], [-30,30,-30], [-30,-30,-30], [30,-30,-30], [30,30,-30], // left
[-30,30,-30], [-30,30,30], [-30,-30,30], [-30,-30,-30], [-30,30,-30] // right
];

var canvas = document.querySelector('.viewport-canvas'),
context = canvas.getContext('2d');

// angular perspetive factor
var d = 1200;
// viewpoint position
var mx = 0, my = 0, mz = 350;
var calc3D = function() {
x = -1*x;
// rotation formulas
xa = cr1*x-sr1*z;
za = sr1*x+cr1*z;
x = cr2*xa+sr2*y;
ya = cr2*y-sr2*xa;
z = cr3*za-sr3*ya;
y = sr3*za+cr3*ya;
// translation formulas
x = x+mx;
y = y+my;
z = z+mz;
// projection formulas
sx = d*x/z;
sy = d*y/z;
};

var WORLD_WIDTH = 800;
var WORLD_HEIGHT = 600;
var SCREEN_WIDTH = context.canvas.width;
var SCREEN_HEIGHT = context.canvas.height;
// scaling values to preserve ratio
var rx, ry;
var toViewport = function() {
sx += WORLD_WIDTH/2;
sy += WORLD_HEIGHT/2;
rx = SCREEN_WIDTH/WORLD_WIDTH;
ry = SCREEN_HEIGHT/WORLD_HEIGHT;
sx *= rx;
sy *= ry;
};

var r1 = 5.68319;
var r2 = 6.28319;
var r3 = 5.79778;
// caculate yaw, roll, pitch rotation factors
var sr1 = Math.sin( r1 );
var sr2 = Math.sin( r2 );
var sr3 = Math.sin( r3 );
var cr1 = Math.cos( r1 );
var cr2 = Math.cos( r2 );
var cr3 = Math.cos( r3 );

// world coordinates
var x, y, z;
// output of 3d perspetive formulas
var sx, sy;
// temporary values in 3d formulas
var xa, ya, za;
// 2d line endpoints
var sxa, sya, sxb, syb;
// temporary storage of 3d line startpoint
var sxs, sys;
var currentVertex;
// draw 6 sides of the cube
var i, j;

currentVertex = 0;
for( i = 0; i < 6; i++ ) {
if( i < 3 ) {
context.strokeStyle = '#888';
} else {
context.strokeStyle = '#fff';
}
x = cube3D[currentVertex][0];
y = cube3D[currentVertex][1];
z = cube3D[currentVertex][2];
calc3D();
toViewport();
sxa = sx;
sya = sy;
for( j = 0; j < 4; j++ ) {
currentVertex++;
x = cube3D[currentVertex][0];
y = cube3D[currentVertex][1];
z = cube3D[currentVertex][2];
calc3D();
toViewport();
sxs = sx;
sys = sy;
sxb = sx;
syb = sy;
context.beginPath();
context.moveTo( sxa, sya );
context.lineTo( sxb, syb );
context.stroke();
context.closePath();
sxa = sxs;
sya = sys;
}
currentVertex++;
}