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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
"use strict";
// CONSTANTS
var TEXTURE_PATH = "textures/";
var COLORS = ["red","blue","green","orange","yellow","white"];
var AMB_LIGHT_COLOR = new THREE.Vector3( 0.45, 0.45, 0.45 );
var SPOT_LIGHT_POS = [
1.00 * 10.0, 1.00 * 10.0, 1.00 * 10.0 ,
-1.00 * 10.0, 1.00 * 10.0, 1.00 * 10.0 ,
1.00 * 10.0, 1.00 * 10.0, -1.00 * 10.0 ,
-1.00 * 10.0, 1.00 * 10.0, -1.00 * 10.0 ,
0.00 * 10.0, -1.00 * 10.0, 0.00 * 10.0
];
var STEP = 0.05;
// Camera, scene, gui and debugging stuff
var scene, camera, controls, renderer;
var gui, stats;
var needsRender = true;
// Custom shaders
var shaders;
// Animations
var animation = false, current_animation, animator = null;
var removeCounter = false, scramb = false;
var q,q_init,q_end;
var face, x;
// Cubies
var cubies = new Map();
////////////////////////////////////////////////////////////////////
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, 0.80 * window.innerWidth / window.innerHeight, 0.1, 1000);
camera.translateX(3.5);
camera.translateY(3.5);
camera.translateZ(3.49);
camera.lookAt(new THREE.Vector3(0,0,0));
renderer = new THREE.WebGLRenderer({ antialias: true, precision:"mediump" });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x001133);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0,0,0);
controls.addEventListener('change', render);
gui = new Gui();
//shaders = loadShaders();
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var diffuseMap, specularMap, heightMap;
//specularMap = THREE.ImageUtils.loadTexture(TEXTURE_PATH + "cubie_specular.jpg");
//specularMap.minFilter = THREE.LinearMipMapLinearFilter; specularMap.anisotropy = renderer.getMaxAnisotropy();
//heightMap = THREE.ImageUtils.loadTexture(TEXTURE_PATH + "cubie_height.jpg");
//heightMap.minFilter = THREE.LinearMipMapLinearFilter; heightMap.anisotropy = renderer.getMaxAnisotropy();
var materials = new Array();
for (var i = 0; i < COLORS.length; i++)
{
materials[COLORS[i]] = [diffuseMap,specularMap,heightMap];
}
var textures = new Array(6)
textures["red"] = 0xc41e3a
textures["blue"] = 0x0051ba
textures["green"] = 0x009e60
textures["orange"] = 0xff5800
textures["yellow"] = 0xffd500
textures["white"] = 0xffffff
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/// Debugging purpose ///
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.left = '0px';
document.body.appendChild(stats.domElement);
/////////////////////////
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '5%';
info.style.left = '0%';
info.style.width = '100%';
info.style.fontFamily = 'myFont';
info.style.fontSize = '30';
info.style.textAlign = 'center';
document.body.appendChild(info);
function animate()
{
requestAnimationFrame(animate);
//if(needsRender)
//{
render();
//}
controls.update();
stats.update();
if(animation)
{
q.copy(q_init);
q = q.slerp(q_end,current_animation.func(current_animation.dir * x))
face.quaternion.set(q.x,q.y,q.z,q.w);
if((x += STEP) >= current_animation.max_rotation)
{
animation = false;
updatePositions();
if(animator)
{
animator.goOn();
}
}
needsRender = true;
}
if(removeCounter > 0.0)
{
if ((removeCounter -= STEP) <= 0.0)
{
info.innerHTML = "";
removeCounter = 0.0;
}
}
}
function render()
{
renderer.render(scene, camera);
needsRender = false;
}
solvedCube();
animate();
|
