Hugging Face's logo

Spaces:
broadfield-dev
/
test_js
Running

App Files Community
broadfield-dev commited on
Commit
9ce5d85
·
verified ·
1 Parent(s): 7fd47be

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +13 -30
index.html CHANGED
@@ -7,6 +7,7 @@
7
  <style>
8
  body { margin: 0; overflow: hidden; }
9
  canvas { width: 100%; height: 100%; }
 
10
  </style>
11
  </head>
12
  <body>
@@ -51,23 +52,16 @@
51
  for (let y = -1; y <= 1; y++) {
52
  for (let z = -1; z <= 1; z++) {
53
  const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
54
- const material = new THREE.MeshStandardMaterial({
55
- color: 0x000000,
56
- emissive: 0x000000
57
- });
58
-
59
- const cubie = new THREE.Mesh(geometry, material);
 
 
 
60
  cubie.position.set(x * (cubeSize + 0.01), y * (cubeSize + 0.01), z * (cubeSize + 0.01));
61
-
62
- // Paint faces
63
- for (let face of ['U', 'D', 'L', 'R', 'F', 'B']) {
64
- if ((face === 'U' && y === 1) || (face === 'D' && y === -1) ||
65
- (face === 'L' && x === -1) || (face === 'R' && x === 1) ||
66
- (face === 'F' && z === 1) || (face === 'B' && z === -1)) {
67
- cubie.geometry.faces[getFaceIndex(face)].color.setHex(colors[face]);
68
- }
69
- }
70
- cubie.geometry.colorsNeedUpdate = true;
71
  cubies.push({ mesh: cubie, originalPosition: cubie.position.clone(), originalRotation: cubie.rotation.clone() });
72
  scene.add(cubie);
73
  }
@@ -101,8 +95,8 @@
101
  let currentRotation = 0;
102
 
103
  function animate() {
104
- if (currentRotation < targetRotation) {
105
- currentRotation += 0.1;
106
  pivot.rotation[axis] = currentRotation;
107
  requestAnimationFrame(animate);
108
  } else {
@@ -127,7 +121,7 @@
127
 
128
  let unscrambling = false;
129
  function unscramble() {
130
- if (!unscrambling) {
131
  unscrambling = true;
132
  const interval = setInterval(() => {
133
  if (movesHistory.length > 0) {
@@ -147,17 +141,6 @@
147
  renderer.render(scene, camera);
148
  }
149
  animate();
150
-
151
- function getFaceIndex(face) {
152
- switch(face) {
153
- case 'U': return 4; // top
154
- case 'D': return 5; // bottom
155
- case 'L': return 0; // left
156
- case 'R': return 1; // right
157
- case 'F': return 2; // front
158
- case 'B': return 3; // back
159
- }
160
- }
161
  </script>
162
  </body>
163
  </html>
 
7
  <style>
8
  body { margin: 0; overflow: hidden; }
9
  canvas { width: 100%; height: 100%; }
10
+ #controls { position: absolute; bottom: 10px; left: 10px; z-index: 10; }
11
  </style>
12
  </head>
13
  <body>
 
52
  for (let y = -1; y <= 1; y++) {
53
  for (let z = -1; z <= 1; z++) {
54
  const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
55
+ const materials = [
56
+ new THREE.MeshStandardMaterial({color: x === -1 ? colors['L'] : 0x000000}), // Left
57
+ new THREE.MeshStandardMaterial({color: x === 1 ? colors['R'] : 0x000000}), // Right
58
+ new THREE.MeshStandardMaterial({color: z === 1 ? colors['F'] : 0x000000}), // Front
59
+ new THREE.MeshStandardMaterial({color: z === -1 ? colors['B'] : 0x000000}), // Back
60
+ new THREE.MeshStandardMaterial({color: y === 1 ? colors['U'] : 0x000000}), // Up
61
+ new THREE.MeshStandardMaterial({color: y === -1 ? colors['D'] : 0x000000}) // Down
62
+ ];
63
+ const cubie = new THREE.Mesh(geometry, materials);
64
  cubie.position.set(x * (cubeSize + 0.01), y * (cubeSize + 0.01), z * (cubeSize + 0.01));
 
 
 
 
 
 
 
 
 
 
65
  cubies.push({ mesh: cubie, originalPosition: cubie.position.clone(), originalRotation: cubie.rotation.clone() });
66
  scene.add(cubie);
67
  }
 
95
  let currentRotation = 0;
96
 
97
  function animate() {
98
+ if (currentRotation < Math.abs(targetRotation)) {
99
+ currentRotation += 0.1 * Math.sign(targetRotation);
100
  pivot.rotation[axis] = currentRotation;
101
  requestAnimationFrame(animate);
102
  } else {
 
121
 
122
  let unscrambling = false;
123
  function unscramble() {
124
+ if (!unscrambling && movesHistory.length > 0) {
125
  unscrambling = true;
126
  const interval = setInterval(() => {
127
  if (movesHistory.length > 0) {
 
141
  renderer.render(scene, camera);
142
  }
143
  animate();
 
 
 
 
 
 
 
 
 
 
 
144
  </script>
145
  </body>
146
  </html>