3D Rubik's Cube Solver

An interactive, animated 3D Rubik's Cube visualizer and algorithmic solver built with React, Three.js, and the Kociemba two-phase algorithm library.

🚀 Live Demo

Features

• 3D Interactive Cube: A fully rotatable 3D model of a Rubik's Cube built with @react-three/fiber and @react-three/drei.
• Manual Input Mode: Map your physical, scrambled cube into the app using an intuitive 2D grid layout and an active brush color palette.
• Algorithm Solver: Uses cubejs (Kociemba's two-phase algorithm) offloaded to a Web Worker to calculate solutions mathematically without freezing your browser due to parity errors.
• Scramble Generator: Instantly shuffle the cube into random states to practice and test the algorithms.
• Glassmorphism UI: A sleek, premium dark-mode interface built with modern CSS properties and lucide-react iconography.

Tech Stack

• React 18
• Vite
• Three.js
• @react-three/fiber & @react-three/drei
• cubejs (Algorithmic backend)
• lucide-react (Icons)

Installation & Setup

1. Navigate to the Project Directory:

   cd Rubic-Cube-Solver

2. Install Dependencies:

   npm install

3. Start the Development Server:

   npm run dev

4. Open in Browser: Navigate to http://localhost:5173 (or the local port specified by Vite in your terminal).

Usage

1. Calculate Solution: Click the "Calculate Solution" button for the solver to process the sequence of standard Rubik's moves (e.g. U, R2, F').
2. Shuffle: Randomize the visual orientation via backend strings and test the solver manually.
3. Manual Input Mode: Lock the camera view, pick an active color from the brush palette, and color the 2D map to match a real physical cube you might have. A dedicated Web Worker guarantees your page won't freeze even if you accidentally enter an impossible cube combination!

Roadmap for Future Updates

• Implementing the physical 3D turn-animation queue to watch the cube solve itself visually step-by-step.