Introduction
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
The plugin code is available here: https://github.com/godlikemouse/jquery.cube.threejs.js
Working Example
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.
Conclusion
For more information on this plugin or to view the source please visit: https://github.com/godlikemouse/jquery.cube.threejs.js
13 Comments
Niranjana · March 2, 2016 at 2:22 am
Thank you for the excellent plugin. Unfortunately this one is not working in some windows PC. Getting this error:
three.min.js:639 THREE.WebGLRenderer 74
three.min.js:643 THREE.WebGLRenderer: Error creating WebGL context.THREE.WebGLRenderer @ three.min.js:643
three.min.js:683 Uncaught TypeError: Cannot read property ‘getExtension’ of null
The same code working in my windows PC and not in two of my colleague windows PC. Is there any solution?
Thanks,
godlikemouse · March 2, 2016 at 9:36 am
Hi Niranjana, what browser/versions and Windows versions are they running on?
Niranjana · March 2, 2016 at 9:57 pm
Hi,
It seems webGL require to update graphics card in windows PC. Upgrade your graphics drivers to use hardware acceleration and WebGL.
my test result:
Windows 7 – Working all browsers
another Windows 7 PC- Not working in IE,Chrome, and Firefox
another Windows 8 PC- Not working in IE,Chrome, and Firefox
Thank you so much for your great plugin. Unfortunately i am not able to use this in my project.
godlikemouse · March 2, 2016 at 10:51 pm
Hi Niranjana, that makes sense. I can add a fallback driver if you’d like which will use the canvas renderer however, this will be quite a bit slower than the WebGL version. Please let me know if you’d like me to add the fallback. Thanks.
Niranjana · March 2, 2016 at 11:57 pm
Hi Godlikemouse,
It would be great if you provide a solution to overcome this WebGL update issue.
Thank You
Niranjana · March 3, 2016 at 2:28 am
Yes Please.. Thank you
godlikemouse · March 4, 2016 at 4:11 pm
Hi Niranjana,
I’ve updated the github repo for jquery.cube.three.js to have a canvas renderer fallback now. You’ll want to have a look at the includes for the example files to include the canvas projector and renderer. Please let me know if you have any further issues with it or post a bug directly to github. Thanks.
Niranjana · March 5, 2016 at 2:28 am
Thank you godlikemouse. This is what i want. Thank you so much for your effort.
godlikemouse · March 7, 2016 at 2:05 pm
No problem, glad to help.
Dux · June 8, 2016 at 1:42 am
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.
godlikemouse · June 17, 2016 at 1:52 pm
Hi Dux, I didn’t actually think that one through. I could add a reset method to the cube to put it back to its initial position. Would that help?
godlikemouse · June 17, 2016 at 2:50 pm
I went ahead and added it to the code base. It’s now available on github https://github.com/godlikemouse/jquery.cube.threejs.js
Dux · June 29, 2016 at 6:54 am
Thank you, that works for my oll pll trainer.