3d cube rendering

1 files changed, 39 insertions, 11 deletions

diff --git a/assets/js/global.js b/assets/js/global.js
index 99e898c..9780814 100644
--- a/assets/js/global.js
+++ b/assets/js/global.js
@@ -12,6 +12,7 @@ window.onload = function () {
 
 function draw() {
 	// draw the cube
+	drawCube();
 		// generate the cube config
 			// get the initial position
 			// get the initial face
@@ -37,25 +38,25 @@ function generateCubeConfig() {
 
 function drawBoard() {
 
-	for (var i = 0; i < 6; i++) {
-		for (var j = 0; j < 6; j++) {
-			window.ctx.moveTo(0, 100*j);
-			window.ctx.lineTo(600, 100*j);
+	for (var i = 0; i < 3; i++) {
+		for (var j = 0; j < 3; j++) {
+			window.ctx.moveTo(0, 200*j);
+			window.ctx.lineTo(600, 200*j);
 			window.ctx.stroke();
 
-			window.ctx.moveTo(100*i, 0);
-			window.ctx.lineTo(100*i, 600);
+			window.ctx.moveTo(200*i, 0);
+			window.ctx.lineTo(200*i, 600);
 			window.ctx.stroke();
 
 			var left = 0;
-			for (var a = 0; a < 6; a++) {
-				for (var b = 0; b < 6; b += 2) {
-					startX = b * 100;
+			for (var a = 0; a < 3; a++) {
+				for (var b = 0; b < 3; b += 2) {
+					startX = b * 200;
 					if (a % 2 == 0) {
-						startX = (b+1) * 100;
+						startX = (b+1) * 200;
 						window.ctx.fillStyle = "#FF0000";		//red 
 					}
-					window.ctx.fillRect(startX + left, (a * 100) , 100, 100);
+					window.ctx.fillRect(startX + left, (a * 200) , 200, 200);
 				}
 			}
 		}
@@ -64,4 +65,31 @@ function drawBoard() {
 	if (window.debug) {
 		console.log("finished drawing game board");
 	}
+}
+
+function drawCube() {
+	var scene = new THREE.Scene();		//scene
+	//camera
+	var camera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
+
+	//renderer
+	var renderer = new THREE.WebGLRenderer({ alpha: true });
+	renderer.setSize(200, 200);
+	document.body.appendChild(renderer.domElement);
+
+	var geometry = new THREE.BoxGeometry(10, 10, 10);
+	var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true});
+	var cube = new THREE.Mesh(geometry, material);
+	cube.rotation.y = Math.PI * 45 / 180;
+	scene.add(cube);
+	camera.position.y = 16;
+	camera.position.z = 20;
+	camera.lookAt(cube.position);
+
+	var render = function() {
+		requestAnimationFrame(render);
+		renderer.render(scene, camera);
+	};
+
+	render();
 }
\ No newline at end of file