NUU Web and Graphics Design 3x3x3 Rubiks Cube Javascript Questions
Question
I am trying to create a 3x3x3 Rubik’s cube using HTML and JavaScript. My current issue is that the current code uses 27 cubies to create the overall cube. The issue is the cubies currently have the 6 colours around each cubie. Whereas, I want each face of the overall cube to have 6 colours. So the corner cubies would have 3 colours, the middle edge cubies would have 2 colours, and the center cubies of each face would have 1 colour. The first image shows you what the current code looks like and the second image will show a rough idea of what I want it to look like. I also want to be able to rotate the faces using keys. For example: The left face could be rotated should rotate anti-clockwise using ‘q’ and clockwise with ‘a’ the right face should rotate anti-clockwise using ‘w’ and clockwise using ‘s’. The front face should rotate anti-clockwise using ‘e’ and clockwise using ‘d’ and the back face should rotate anti-clockwise using ‘r’ and clockwise using ‘f’. The top face should rotate anti-clockwise using ‘u’ and clockwise using ‘i’ and the bottom face to rotate anti-clockwise using ‘j’ and clockwise using ‘k’. This is the current code that correlates to the first image (The rotations are incorrect in this code):
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>3x3x3 Rubik’s Cube with Three.js</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#rubiksCubeContainer {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body tabindex=”0″>
<div id=”rubiksCubeContainer”></div>
<script type=”module”>
import * as THREE from ‘https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js’;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById(‘rubiksCubeContainer’).appendChild(renderer.domElement);
const cubieGeometry = new THREE.BoxGeometry(1, 1, 1);
const createCubie = (x, y, z) => {
const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff8800, 0xffffff];
const materials = colors.map(color => new THREE.MeshBasicMaterial({ color }));
const cubie = new THREE.Mesh(cubieGeometry, materials);
cubie.geometry.faces.forEach((face, index) => {
face.materialIndex = Math.floor(index / 2); // Each face has two triangles
});
cubie.position.set(x, y, z);
scene.add(cubie);
return cubie;
};
const createLayer = (layerNumber) => {
const group = new THREE.Group();
for (let x = 0; x < 3; x++) {
for (let y = 0; y < 1; y++) {
for (let z = 0; z < 3; z++) {
const cubie = createCubie(x * 1.1 – 1.1, y * 1.1 – 1.1, z * 1.1 – 1.1);
group.add(cubie);
}
}
}
group.position.set(0, 1.1 * layerNumber, 0);
scene.add(group);
return group;
};
const topLayerGroup = createLayer(1);
const middleLayerGroup = createLayer(0);
const bottomLayerGroup = createLayer(-1);
camera.position.set(5, 5, 8);
camera.lookAt(scene.position);
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
window.addEventListener(‘resize’, () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
window.addEventListener(‘keydown’, (event) => {
switch (event.key) {
case ‘i’:
rotateGroupCounterClockwise(topLayerGroup);
break;
case ‘u’:
rotateGroupClockwise(topLayerGroup);
break;
case ‘k’:
rotateGroupCounterClockwise(middleLayerGroup);
break;
case ‘j’:
rotateGroupClockwise(middleLayerGroup);
break;
case ‘m’:
rotateGroupCounterClockwise(bottomLayerGroup);
break;
case ‘n’:
rotateGroupClockwise(bottomLayerGroup);
break;
case ‘a’:
rotateColumnCounterClockwise(0);
break;
case ‘q’:
rotateColumnClockwise(0);
break;
case ‘s’:
rotateColumnCounterClockwise(1);
break;
case ‘w’:
rotateColumnClockwise(1);
break;
case ‘d’:
rotateColumnCounterClockwise(2);
break;
case ‘e’:
rotateColumnClockwise(2);
break;
}
});
animate();
const rotateGroupCounterClockwise = (group) => {
group.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
updateRenderer();
};
const rotateGroupClockwise = (group) => {
group.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
updateRenderer();
};
const rotateColumnCounterClockwise = (columnIndex) => {
const columnCubies = [
// List of cubies in the specified column
topLayerGroup.children[columnIndex * 3],
middleLayerGroup.children[columnIndex * 3],
bottomLayerGroup.children[columnIndex * 3],
topLayerGroup.children[columnIndex * 3 + 1],
middleLayerGroup.children[columnIndex * 3 + 1],
bottomLayerGroup.children[columnIndex * 3 + 1],
topLayerGroup.children[columnIndex * 3 + 2],
middleLayerGroup.children[columnIndex * 3 + 2],
bottomLayerGroup.children[columnIndex * 3 + 2],
];
// Use the X-axis as the rotation axis (1, 0, 0)
const axis = new THREE.Vector3(1, 0, 0);
// Rotate each cubie in the column on the specified axis
columnCubies.forEach((cubie) => cubie.rotateOnAxis(axis, Math.PI / 2));
// Update the renderer to reflect the changes
updateRenderer();
};
// For rotating the column clockwise
const rotateColumnClockwise = (columnIndex) => {
const columnCubies = [
// List of cubies in the specified column
topLayerGroup.children[columnIndex * 3],
middleLayerGroup.children[columnIndex * 3],
bottomLayerGroup.children[columnIndex * 3],
topLayerGroup.children[columnIndex * 3 + 1],
middleLayerGroup.children[columnIndex * 3 + 1],
bottomLayerGroup.children[columnIndex * 3 + 1],
topLayerGroup.children[columnIndex * 3 + 2],
middleLayerGroup.children[columnIndex * 3 + 2],
bottomLayerGroup.children[columnIndex * 3 + 2],
];
// Use the X-axis as the rotation axis (1, 0, 0)
const axis = new THREE.Vector3(1, 0, 0);
// Rotate each cubie in the column on the specified axis
columnCubies.forEach((cubie) => cubie.rotateOnAxis(axis, -Math.PI / 2));
// Update the renderer to reflect the changes
updateRenderer();
updateRenderer();
};
const updateRenderer = () => {
renderer.render(scene, camera);
};
</script>
</body>
</html>
Get your college paper done by experts
Do my questionPlace an order in 3 easy steps. Takes less than 5 mins.
Leave a Reply
Want to join the discussion?Feel free to contribute!