1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
window.onload = function () {
window.debug = false; // set to true iff you want console log output
var canvas = document.getElementById("main-canvas");
window.ctx = canvas.getContext("2d");
// canvas.style.display = "none";
draw();
}
function draw() {
// draw the cube
drawCube();
// generate the cube config
// get the initial position
// get the initial face
// get the final position
// get the final face
//draw the board 3 x 3
drawBoard();
}
function clear() {
}
function update() {
}
function generateCubeConfig() {
}
function drawBoard() {
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(200*i, 0);
window.ctx.lineTo(200*i, 600);
window.ctx.stroke();
var left = 0;
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) * 200;
window.ctx.fillStyle = "#FF0000"; //red
}
window.ctx.fillRect(startX + left, (a * 200) , 200, 200);
}
}
}
}
if (window.debug) {
console.log("finished drawing game board");
}
}
function drawCube() {
//renderer
var canvas = document.getElementById("cube-canvas");
var renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });
renderer.setSize(200, 200);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene(); //scene
// var geometry = new THREE.BoxGeometry(100, 100, 100);
// var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true});
var materials = [];
for (var i = 1; i <= 6; i++) {
var img = new Image();
// img.crossOrigin = "anonymous";
img.src = 'assets/images/faces/' + i + '.png';
var tex = new THREE.Texture(img);
img.tex = tex;
img.onload = function() {
this.tex.needsUpdate = true;
};
var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex});
materials.push(mat);
}
var cubeGeo = new THREE.BoxGeometry(100,100,100,1,1,1);
var cube = new THREE.Mesh(cubeGeo, new THREE.MeshFaceMaterial( materials ));
// var cube = new THREE.Mesh(geometry, material);
cube.rotation.y = Math.PI * 45 / 180;
scene.add(cube);
//camera
var camera = new THREE.PerspectiveCamera(45, 1, 0.1, 10000);
camera.position.y = 160;
camera.position.z = 200;
camera.lookAt(cube.position);
scene.add(camera);
var clock = new THREE.Clock();
var render = function() {
requestAnimationFrame(render);
cube.rotation.y -= clock.getDelta();
renderer.render(scene, camera);
};
render();
}
|
