New Rubik’s Cube jQuery ThreeJS WebGL Plugin

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

13 thoughts on “New Rubik’s Cube jQuery ThreeJS WebGL Plugin

  1. Dux

    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.

    Reply
    1. godlikemouse Post author

      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?

      Reply
  2. godlikemouse Post author

    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.

    Reply
  3. Niranjana

    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,

    Reply
      1. Niranjana

        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.

        Reply
        1. godlikemouse Post author

          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.

          Reply
          1. Niranjana

            Hi Godlikemouse,

            It would be great if you provide a solution to overcome this WebGL update issue.

            Thank You

Leave a Reply

Your email address will not be published. Required fields are marked *