Rubik's Cube in Three.js
This code was designed for desktop browsers like Firefox or Chrome and a window with landscape orientation, but some of it also works with tablets or smartphones.
To rotate one of the six faces, first press the key for the first character of the center color (like R for red or W for white) and then press the right or left arrow for a clockwise or counterclockwise turn by 90 degrees. To rotate the whole cube, press C followed by one of the four arrow keys or either one of the Page Up and Page Down Keys. Do the same with M instead for the middle layers. 0 (zero, not to be confused with O for orange) will bring the cube back to its original arrangement. Finally, you can press A (mnemonic: "arbitrary") for a random arrangement.
The F1 key can be used to toggle visibility of this info box and the H key (mnemonic: "hide") can be used to toggle visibility of the projection on the right. Once you know how to solve the puzzle, press T while the projection is visible to make it a bit harder …
If you press S, the following moves will be recorded and eventually be stored once you press one of the keys 1 to 9. Pressing the same digit again will replay the stored sequence. Pressing I followed by one of the digits will replay the inverse of the stored sequence. Stored sequences are put into the local storage of your browser and will thus persist after you leave the page or close the browser. (Note that moves are stored relative to the current orientation of the cube and not relative to center colors.)
You can also use the mouse (or your finger): Click/tap one of the 27 visible faces and drag it along the column or row it's in. Or move the mouse/finger left, right, up, or down near the cube (with the mouse button pressed down) to rotate the whole cube. For the up/down movement, you'll get different rotations with the right mouse button (or with two fingers). With a tablet, you can double-tap the corners for the original (upper left) or a random (lower left) arrangement. Double-tap the projection to hide it and double-tap where it was to unhide it.

Copyright (c) 2021, Prof. Dr. Edmund Weitz. Impressum, Datenschutzerklärung.