A fully interactive, customizable, and animated 3D Rubik's Cube simulation built with Three.js for the web.
This project simulates a realistic 3D Rubik’s Cube with fully interactive mouse and touch controls. Users can rotate layers, solve scrambles, track their times, and personalize the look and feel of the cube with themes, animation styles, and advanced color options.
- Rotate full cube and individual layers with mouse/touch
- Intuitive drag mechanics for layer turning
- Confetti celebration on solving the cube
- Reset and recenter camera with a single click
- Cube Sizes: 2x2x2 to 5x5x5
- Animation Styles: Swift, Smooth, Bounce
- Color Themes: Cube, Erno, Dust, Camo, Rain
- HSL sliders for fine-tuning each cube face color
- Perspective vs Orthographic camera toggle
- Built-in timer with best time tracking
- Stats panel showing solve count and averages
- Scramble generator with selectable difficulty
- Powered by Three.js for WebGL rendering
- Responsive design for mobile and desktop
- Saves preferences and stats using LocalStorage
- Modular animation engine with RAF-based updates
| Action | Interaction |
|---|---|
| Rotate entire cube | Click & drag anywhere |
| Turn a layer | Click near edge & drag |
| Start timer | Double-click or double-tap |
| Reset camera | Tap back/reset button |
| Open Preferences | Click on gear icon |
- 2x2x2 – Pocket Cube
- 3x3x3 – Standard Cube
- 4x4x4 – Rubik's Revenge
- 5x5x5 – Professor's Cube
- Cube – Classic Rubik’s Cube colors
- Erno – Traditional speedcube palette
- Dust – Soft muted tones
- Camo – Military-inspired camouflage
- Rain – Bright rainbow gradient
- Cube size selector
- Animation style dropdown
- Scramble difficulty
- Color theme and HSL controls
- Camera mode toggle
- Launch the app in your browser.
- Use mouse or touch to interact with the cube.
- Customize via gear icon.
- Double-tap to start solving mode.
- Solve and get confetti celebration if completed!
To run the project locally:
# Clone this repository
git clone https://github.com/your-username/rubik-cube.git
# Navigate to the project directory
cd rubik-cube
# Install live-server globally (if not already installed)
npm install -g live-server
# Start the server
live-serverThe app will be available at: http://localhost:8080
- Three.js – for 3D rendering
- Bungee Font – fun UI font
- [HTML/CSS/JS] – for structuring and interaction
- 6x6x6 and 7x7x7 cube support
- Guided solution/tutorial mode
- Move counter with algorithm display
- Save/load cube state
- Multiplayer race mode
- VR mode for immersive solving