rubiks-cube
rubiks-cube copied to clipboard
Published
20 hours ago •
taylorjg
taylorjg
A three.js visualisation of solving a Rubik's cube
Description
A three.js visualisation of solving a Rubik's cube.
Status
Currently, I have not implemented the solving part. Instead, I am cheating by using a reversed list of opposite moves as the solution.
Query Params
The following query params can be added:
| Query Param | Description | Values | Default |
|---|---|---|---|
| cubeSize | The size of the cube | 2-5 | 3 |
| animationSpeed | How quickly to animate the moves | 100-5000 ms | 750 ms |
| autoRotate | Auto rotate the cube as it is solving | bool | true |
| autoRotateSpeed | Speed of auto rotatation (if enabled) | 0-10000 ms | 1000 ms |
| axesEnabled | Draw the X, Y and Z axes | bool | false |
Examples
- https://taylorjg.github.io/rubiks-cube?animationSpeed=250
- https://taylorjg.github.io/rubiks-cube?animationSpeed=250&cubeSize=2
- https://taylorjg.github.io/rubiks-cube?animationSpeed=250&cubeSize=4
- https://taylorjg.github.io/rubiks-cube?animationSpeed=250&cubeSize=4&axesEnabled
TODO
- ~~Improve the look of the cube pieces~~
- ~~Add a slide-out panel to configure the size, speed etc~~
- Implement an algorithm to solve the cube properly
taylorjg