Three.js Rubik's Cube

Three.js Rubik's Cube import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Camera position camera.position.set(3, 3, 3); camera.lookAt(0, 0, 0); // Orbit Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Cube colors (matching BoxGeometry face order: +X, -X, +Y, -Y, +Z, -Z) const colors = { green: 0x00ff00, // Right (+X) blue: 0x0000ff, // Left (-X) white: 0xffffff, // Up (+Y) yellow: 0xffff00,// Down (-Y) red: 0xff0000, // Front (+Z) orange: 0xffa500 // Back (-Z) }; // Create a single cubie function createCubie() { const geometry = new THREE.BoxGeometry(0.95, 0.95, 0.95); // Slightly smaller to show edges const materials = [ new THREE.MeshBasicMaterial({ color: colors.green }), // +X new THREE.MeshBasicMaterial({ color: colors.blue }), // -X new THREE.MeshBasicMaterial({ color: colors.white }), // +Y new THREE.MeshBasicMaterial({ color: colors.yellow }), // -Y new THREE.MeshBasicMaterial({ color: colors.red }), // +Z new THREE.MeshBasicMaterial({ color: colors.orange }) // -Z ]; const cubie = new THREE.Mesh(geometry, materials); return cubie; } // Create the 3x3x3 grid of cubies (including face centers, excluding the very center) const cubies = []; const spacing = 1; // Distance between cubie centers for (let x = -1; x <= 1; x++) { for (let y = -1; y <= 1; y++) { for (let z = -1; z <= 1; z++) { // Skip the very center cubie if (x === 0 && y === 0 && z === 0) continue; const cubie = createCubie(); cubie.position.set(x * spacing, y * spacing, z * spacing); scene.add(cubie); cubies.push(cubie); } } } // Rotation state variables let isRotating = false; let rotationGroup = null; let rotatingCubies = []; let rotationAxis = new THREE.Vector3(); let targetAngle = 0; let currentRotationAngle = 0; const rotationSpeed = Math.PI / 60; // Rotate 90 degrees in ~30 frames // Function to find cubies on a specific face based on their current world position function getFaceCubies(axis, value) { const faceCubies = []; const tolerance = 0.1; // Use a small tolerance for floating point comparison cubies.forEach(cubie => { // Get the cubie's current world position cubie.updateWorldMatrix(true, false); // Update world matrix but not children const worldPosition = new THREE.Vector3().setFromMatrixPosition(cubie.matrixWorld); if (axis === 'x' && Math.abs(worldPosition.x - value * spacing) < tolerance) { faceCubies.push(cubie); } else if (axis === 'y' && Math.abs(worldPosition.y - value * spacing) < tolerance) { faceCubies.push(cubie); } else if (axis === 'z' && Math.abs(worldPosition.z - value * spacing) < tolerance) { faceCubies.push(cubie); } }); return faceCubies; } // Function to start a rotation function startRotation(axis, value, angle) { if (isRotating) return; rotatingCubies = getFaceCubies(axis, value); if (rotatingCubies.length === 0) return; // No cubies found for this face (shouldn't happen for a valid face) isRotating = true; rotationAxis = new THREE.Vector3(); rotationAxis[axis] = angle > 0 ? 1 : -1; // Set axis direction based on angle sign targetAngle = angle; currentRotationAngle = 0; // Create a temporary group for rotation rotationGroup = new THREE.Group(); scene.add(rotationGroup); // Add cubies to the group rotatingCubies.forEach(cubie => { // Attach moves the cubie from its current parent (scene) to the new parent (rotationGroup) // while preserving its world transform (position, rotation, scale). rotationGroup.attach(cubie); }); } // Handle keyboard input window.addEventListener('keydown', (event) => { const key = event.key; let axis = null; let value = null; let angle = 0; switch (key) { case 'r': // Right face clockwise (+X) axis = 'x'; value = 1; angle = Math.PI / 2; break; case 'R': // Right face counter-clockwise (+X) axis = 'x'; value = 1; angle = -Math.PI / 2; break; case 'l': // Left face clockwise (-X) - Rotation around -X axis axis = 'x'; value = -1; angle = Math.PI / 2; break; case 'L': // Left face counter-clockwise (-X) - Rotation around +X axis axis = 'x'; value = -1; angle = -Math.PI / 2; break; case 'u': // Up face clockwise (+Y) axis = 'y'; value = 1; angle = Math.PI / 2; break; case 'U': // Up face counter-clockwise (+Y) axis = 'y'; value = 1; angle = -Math.PI / 2; break; case 'd': // Down face clockwise (-Y) - Rotation around -Y axis axis = 'y'; value = -1; angle = Math.PI / 2; break; case 'D': // Down face counter-clockwise (-Y) - Rotation around +Y axis axis = 'y'; value = -1; angle = -Math.PI / 2; break; case 'f': // Front face clockwise (+Z) axis = 'z'; value = 1; angle = Math.PI / 2; break; case 'F': // Front face counter-clockwise (+Z) axis = 'z'; value = 1; angle = -Math.PI / 2; break; case 'b': // Back face clockwise (-Z) - Rotation around -Z axis axis = 'z'; value = -1; angle = Math.PI / 2; break; case 'B': // Back face counter-clockwise (-Z) - Rotation around +Z axis axis = 'z'; value = -1; angle = -Math.PI / 2; break; default: return; // Ignore other keys } startRotation(axis, value, angle); }); // Animation loop function animate() { requestAnimationFrame(animate); if (isRotating) { const angleStep = targetAngle > 0 ? rotationSpeed : -rotationSpeed; const nextAngle = currentRotationAngle + angleStep; let rotationComplete = false; const tolerance = 0.005; // Small tolerance for floating point comparison if (targetAngle > 0) { rotationComplete = nextAngle >= targetAngle - tolerance; } else { rotationComplete = nextAngle <= targetAngle + tolerance; } if (rotationComplete) { // Perform the final rotation step to reach the exact target angle const remainingAngle = targetAngle - currentRotationAngle; rotationGroup.rotateOnAxis(rotationAxis, remainingAngle); // Update cubie positions and rotations based on their new world transforms rotatingCubies.forEach(cubie => { // Get the cubie's world transform after the group rotation cubie.updateWorldMatrix(true, true); // Set the cubie's position and rotation based on its world transform cubie.position.setFromMatrixPosition(cubie.matrixWorld); cubie.rotation.setFromRotationMatrix(cubie.matrixWorld); // Add cubie back to the scene (removes it from the group) scene.attach(cubie); }); // Clean up the rotation group scene.remove(rotationGroup); rotationGroup.clear(); rotationGroup = null; rotatingCubies = []; isRotating = false; currentRotationAngle = 0; // Snap cubie positions to the nearest grid point to prevent floating point drift cubies.forEach(cubie => { cubie.position.x = Math.round(cubie.position.x / spacing) * spacing; cubie.position.y = Math.round(cubie.position.y / spacing) * spacing; cubie.position.z = Math.round(cubie.position.z / spacing) * spacing; // Optional: Reset rotation to identity and recalculate based on new snapped position // This can help if rotation matrix accumulation causes issues, but setFromRotationMatrix is usually sufficient. // cubie.rotation.setFromVector3(new THREE.Euler(0, 0, 0)); // Reset rotation // Recalculate rotation based on new position if needed (more complex) }); } else { // Perform partial rotation step rotationGroup.rotateOnAxis(rotationAxis, angleStep); currentRotationAngle = nextAngle; } } controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true renderer.render(scene, camera); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); animate();