Rubik's Cube is a realistic, fully playable 3×3 Rubik's Cube prototype that runs in the browser. It brings together a Three.js-based 3D scene, physical twist interaction and a real solving algorithm.

Visuals & Scene

True colors with a black plastic body and rounded glossy stickers.
4K HDR environment (Poly Haven) — the cube floats in mid-air over a sunset bridge scene, with real reflections. Progressive loading: 1K appears instantly, then 4K sharpens in.
ACES tonemapping and image-based lighting (IBL) for a premium plastic look.

Interaction

Real Rubik's twist: grab a sticker and drag, and the correct layer turns based on the face normal × drag direction (on every face).
Free rotation: drag on empty space → the whole cube orbits.
Difficulty: quick scramble with 12 / 24 / 48 moves or a custom two-digit number.

A Real Solution — Kociemba

A logical cube (cubejs) is kept in parallel with the Three.js cube, and every move is mirrored to it. The “Solve” button uses the Kociemba two-phase algorithm to genuinely solve the cube's current state in ~20 moves, and the solution is animated on screen — this is not a rewind, it is a real solver.

Technology: Three.js (WebGL), RGBELoader + PMREM (HDR/IBL), OrbitControls, cubejs (Kociemba).

👉 Try the live prototype →

Rubik's Cube — Interactive 3D Prototype