https://github.com/duyetbku/web-rubiks-cube-solver
🧊 A 3D Interactive Self-Solving Rubik’s Cube powered by React + Three.js + CFOP algorithm. Scramble, watch it solve, or upload your own cube state. Just one click away from magic.
https://github.com/duyetbku/web-rubiks-cube-solver
3d-graphics 3d-rubiks-cube 3d-simulator 3d-visualization auto-solver browser-game cfop-algorithm computer-vision game-development interactive-3d puzzle-solver react react-three-fiber rubiks-cube rubiks-cube-solver rubiks-cube-tutorial three-js-rubik threejs web-app webgl
Last synced: 19 days ago
JSON representation
🧊 A 3D Interactive Self-Solving Rubik’s Cube powered by React + Three.js + CFOP algorithm. Scramble, watch it solve, or upload your own cube state. Just one click away from magic.
- Host: GitHub
- URL: https://github.com/duyetbku/web-rubiks-cube-solver
- Owner: DuyetBKU
- License: other
- Created: 2025-08-02T21:21:33.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-10T18:22:48.000Z (10 months ago)
- Last Synced: 2025-08-10T20:29:39.957Z (10 months ago)
- Topics: 3d-graphics, 3d-rubiks-cube, 3d-simulator, 3d-visualization, auto-solver, browser-game, cfop-algorithm, computer-vision, game-development, interactive-3d, puzzle-solver, react, react-three-fiber, rubiks-cube, rubiks-cube-solver, rubiks-cube-tutorial, three-js-rubik, threejs, web-app, webgl
- Language: TypeScript
- Homepage: https://rubiks-cube-solver-nu.vercel.app
- Size: 256 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
🤖 3D Rubik's Cube Auto-Solver
🔥 Interactive | 🚀 Auto-Solve | 🎯 CFOP Algorithm | 🧠 Built with React + Three.js
---
## 🧩 What is this?
**Rubik's Cube Auto Solver 3D** is a web-based simulator that:
- 📷 Captures the current cube state
- 💡 Visualizes it in full 3D using `Three.js`
- 🤖 Solves it step-by-step using the **CFOP** algorithm
- 🌀 Allows scrambling, solving, pausing, and more — all inside your browser!
> ⚡ Perfect for learning algorithms, showing off, or integrating into teaching tools.
---
## ✨ Features
✅ Interactive 3D visualization
✅ CFOP-based solving algorithm
✅ Scramble generator
✅ Auto-solve animation with speed control
✅ Snapshot the current cube state (generates shareable link)
✅ Real-time progress & step display
✅ Built with `React`, `Three.js`, `Tailwind`, and deployed on `Vercel`
---
## 🌍 Live Demo
> 🧪 Try it here:
**[🔗 View Live Rubik Solver](https://rubiks-cube-solver-nu.vercel.app)**
---
## 🛠️ Technologies Used
- 🎨 **Three.js** – Real-time 3D rendering
- ⚛️ **React** – UI logic and state management
- 🌀 **React Three Fiber** – Integrates Three.js into React
- 🎮 **Drei + OrbitControls** – Camera & controls
- 🧠 **Custom CFOP Solver** – Step-by-step Rubik's logic
- 📷 **Canvas snapshot** – Image upload to Vercel Blob storage
---
## 🚧 Roadmap
- [ ] FIX some math errors colored when scramble
- [x] Real-time scramble / auto-solve
- [x] Canvas screenshot & shareable link
- [ ] OCR-based image to cube state (upload photo of real Rubik)
- [ ] Mobile optimization
- [ ] CFOP training mode with step tips
---
## 💬 Why this project?
This project was built to explore:
- WebGL rendering with `Three.js`
- Solving algorithms like CFOP
- User interaction with 3D visuals
- Combining Web + AI + Graphics into one!
---
## 🙌 Support & Star
```bash
git clone https://github.com/DuyetBKU/web-rubik-3d-solver
cd web-rubik-3d-solver
npm install
npm run dev
```
---
## 📬 Contact
For feedback or collab:
---
> Made with 💙 by [DuyetBKU](https://github.com/DuyetBKU)