I have previously released a jQuery Rubik’s cube plugin comprised of only HTML, JavaScript and CSS. Although pretty nifty, there were a few issues with regards to support from some browsers, most notably Firefox and Internet Explorer. I decided to recreate the plugin using WebGL. The result is my jquery.cube.threejs.js plugin. As seen below.
The plugin code is available here: https://github.com/godlikemouse/jquery.cube.threejs.js
See the Pen jQuery ThreeJS Rubik’s Cube by Jason Graves (@godlikemouse) on CodePen.
This plugin utilizes standard cube notation, both modern and old to execute moves. For example, the moves executed by the 3×3 cube above are utilizing the following notation:
x (R’ U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 R2 x’
This algorithm is being passed to the cube plugin by way of the execute() method or data-moves attribute.
This plugin currently supports a number of configuration options that can be passed at instantiation time including, cube face colors, animation delay time with more to come shortly.
This incarnation of the plugin also supports cube sizes of 2×2 up to 9×9 with no issues. Cubes larger than 9×9 may see some degradation in frame rates depending on the speed of the client devices.
For more information on this plugin or to view the source please visit: https://github.com/godlikemouse/jquery.cube.threejs.js
Hi, good and simple work.
how do you think I can reset the cube to its initial position (all faces completed) ?
If I empty the cube div html and reinit the cube function many times, movements become jerky.