3D Cube Drawing

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

Thumbnail
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
Copyright arcollector ©
  • HTML
  • CSS
  • JavaScript
    		<div class="viewport">
			<canvas class="viewport-canvas"></canvas>
		</div>

/*Downloaded from https://www.codeseek.co/arcollector/3d-cube-drawing-alGEv */
    			html {
				background: #ddd;
			}
			.viewport {
				margin: 10px auto;
				border: 1px solid #ccc;
				width: 320px;
				height: 200px;
			}
			.viewport > canvas {
				width: 320px;
				height: 200px;
				background: #000;
			}


/*Downloaded from https://www.codeseek.co/arcollector/3d-cube-drawing-alGEv */
    	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;
	};
	
	// yaw angle in radians
	var r1 = 5.68319;
	// roll angle in radians
	var r2 = 6.28319;
	// pitch angle in radians
	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++;
	}

Comments