Interactive 3D Rubik's Cube

Last Move

-

Cube Info

Cube Notation

The Rubik's Cube, like any good cube, has 6 faces. They're called the Front, Right, Up, Down, Left, and Back faces. The letters F, R, U, D, L, and B denote those faces.

The primary turns to be concerned with are the clockwise, counterclockwise, or double turns. A clockwise turn is denoted using just the letter, so a clockwise turn of the Front face would be F. A counterclockwise turn is represented by adding a single quote after the letter, so a counter clockwise turn of the Front face would be F'. A double turn of the front face is denoted by F2.

An entire cube rotation is denoted with x, y, or z, each representing the axis the cube was rotated on. The same counter clockwise and double turn notation rules apply.

The middle layers of the cube can be rotated too. They are denoted with M, E, and S. I think those mean "Middle", "Equator", and "Slice". To understand what "middle layers" are, it's probably easier to just go press the buttons to turn the layers than it would be to explain it. The same counter clockwise and double turn notation rules apply.

Two layers can be turned at once with "wide" turns. These can be denoted in two ways: a lowercase letter like f or by adding a "w" after the letter like Fw. I like the second notation since it's a bit more obvious. The same counter clockwise and double turn notation rules apply.

Controls

You can pan the cube with right click and zoom in and out with the scroll wheel. No rotating the cube with the mouse since that makes it really ambiguous which face is the "Front" or the "Right" (or it's at least too hard for me to figure out with my limited 3D knowledge).

The "Undo All" button just plays your move history back to you. It is very naive, but I kinda like it.

The wide moves are hidden on smaller screens. Who really needs them anyway.

How it was made

Interactive Rubik's Cube made with Three.js.

Cube Resources

Rubik's Cube Move Notation by Jperm. He has a YouTube channel with tons of great Rubik's Cube videos and his beginner tutorial video is the modern go-to for anyone learning.

The OG "How to solve a Rubik's Cube" video by Dan Brown. This is how I learned in probably 2012 or 2013.

Cubing YouTube Channels

These are some channels I would watch when my Rubik's Cube love was at it's peak. Sad to see many of them haven't been active in a while.

More Cube Info

A double turn can be clockwise or counterclockwise; either way the cube will be in the same state. Three clockwise turns will leave the cube in the same state as if you did one counterclockwise turn. The same is true for three counterclockwise turns. Four turns of a face will leave the cube in the same state as if you did zero turns. Because of this, there is no notation like F3 or F4.