Rubik's Cube Solver

This solver was primarily a 3D graphics programming project to give me an excuse to build something with the excellent Three.js library. Although the final result is not perfect, I think it does demonstrate that it is possible to get quite close to photo-realism using Three.js, and all within a HTML webpage!

Given the primary objective, this solver is not an optimal solver, but merely demonstrates what is generally known as the 'beginner's method' or 'layered method'. Note that even if a configuration that is very close to solved is submitted, the generated solution will still go through the entire 'beginner's method'. Also, there can be occasional redundant moves by following this method so closely, as this solver does.

The solution guide for the method that is demonstrated by this solver can be found at https://rubiks.com/en-US/solve-it. The generated solutions make reference to the steps and actions described in the downloadable pdf at that URL.

Breadth of device/browser support was not an objective of this project. Limited testing on an old tablet and a new smartphone unsurprisingly reveals that (1) appearance and behaviour can vary, and (2) it can run very slowly. Windows 10 PC testing with Edge and Chrome showed no problems, so that would be the recommended setup.

Solution Notation

The notation used is the familiar one that generally refers to single 90 degree turns of the 6 faces, known as (F)ront, (B)ack, (U)p, (D)own, (L)eft and (R)ight. Therefore, F means a single clockwise turn of the front face, F' means a single anti-clockwise turn of the front face, and F2 means a 180 degree turn of the front face.

The 'beginner's method' requires consideration of the orientation of the cube, and so generated solutions include 'Orientate' actions to rotate the entire cube, as well as 'Move' actions that turn/twist the individual faces.

Solver Instructions

Either (1a) click 'Scramble' to generate a random configuration of the cube, or (1b) click 'Clear' and then use the colour buttons and flattened 'cube map' to enter a physical cube configuration that you wish to generate a solution for. If manually entering a configuration (1b), some basic validation will try and ensure that an impossible configuration has not been entered. Note that the centre tiles on each face in the 'cube map' are fixed and cannot be changed. Then (2) click 'Solve' to generate a solution.

The player controls can be used to animate the solution, either as a continually-running sequence by using the play button, or by stepping forwards/backwards through the solution a step at a time by using the step buttons.

If the animation will only run very slowly on your device, lower the visual quality control to speed things up.

Video