3x3 Rubik's cube visualiser which is easy to use, and with a lot of customisation options.
css
html
javascript
rubiks-cube
static-website
three-js
threejs
vanilla-javascript
visualisation
visualization
visualizer
web
webapp
website
| pic | first commit | |
| three | first commit | |
| cube.js | first commit | |
| index.html | first commit | |
| LICENSE | added license | |
| README.md | Update README.md | |
| style.css | first commit | |
Cube Visualiser
A 3x3 Rubik's cube visualiser which is easy to use, and with a lot of customisation options. The state of the Rubik's cube is controlled entirely through URL and rendered in the browser, making it easy to create Rubik's cube algorithm page!
Examples
URL Parameters
| Parameter | Default | Description |
|---|---|---|
view |
cube |
Display mode, cube (3D), plan (last layer view) or animate (3D animation) |
Uface |
w |
Starting top face colour, w (white), g (green), r (red), b (blue), o (orange) or y (yellow) |
Fface |
g |
Starting front face colour, same as choices as Uface |
cc |
000000 |
Cube colour, hex (with or without #) or CSS colour name |
nc |
808080 |
No colour, colour used for stickers with no assigned colour |
fc |
default colour scheme | Face colours, 54 characters string, default: fc=UUUUUUUUUFFFFFFFFFRRRRRRRRRBBBBBBBBBLLLLLLLLLDDDDDDDDD, N for nc colour |
moves |
None | Move sequence to be applied, separated by spaces |
alg |
None | Shows the cube state that can be solved by the algorithm |
stage |
None | Available choices, cross, f2l, oll, pll, ocll, oell, coll, ocell, vls, zbls, els, cll, ell, fl, f2b, cmll, line |
bg |
000000 |
Background colour, hex, CSS colour name, or trans/transparent |
bw |
0.08 |
Border width as a fraction of the face/cell size (range 0–1) |
res |
1 |
Set to 2 or higher to increase the resolution when saving as image |
theta |
35 |
Horizontal camera angle in degrees |
phi |
35 |
Vertical camera angle in degrees |
dist |
10 |
Camera distance from centre |
size |
fit window | U face cell size in pixels (plan view only) |
sh |
0.5 |
Side strip height as a fraction of the U face cell size (plan view only) |
Move notation
Standard WCA notation is supported:
| Notation | Meaning |
|---|---|
R L U D F B |
Outer layer clockwise turns |
R' L' U' D' F' B' |
Counter clockwise turns |
R2 L2 U2 D2 F2 B2 |
Double turns |
R3 L3 U3 D3 F3 B3 |
Triple turns |
r l u d f b |
Wide moves |
M S E |
Slice moves |
x y z |
Cube rotations |