Create A Realistic Self-solving Rubik's Cube With Three.js

A funny jQuery plugin that lets you render a realistic, self-solving Rubik's Cube (up to 9x9) on an HTML5 canvas element using the Three.js JavaScript 3D library.

The jquery.cube.threejs.js plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

How to use it:

1. Include the latest version of jQuery and Three.js libraries from CDN.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/three.min.js"></script>

2. Create placeholder element and define a set of moves to solve the Rubik's Cube as follows:

<div class="cube" 
     data-moves="(U R U' R') (U R U' R') (U R U' R') (U R U' R') (U R U' R') (U R U' R')">
</div>

3. Download and load the jquery.cube.threejs.min.js after jQuery.

<script src="jquery.cube.threejs.min.js"></script>

4. Render a basic (3x3) self-solving Rubik's Cube on the webpage.

$(function(){
  $(".cube").cube();
});

5. You're also allowed to solve the Rubik's Cube using the execute method when needed.

<div class="cube">
</div>

$(function(){
  const myCube = $(".cube").cube();
  myCube.execute("(U R U' R') (U R U' R') (U R U' R') (U R U' R') (U R U' R') (U R U' R')");
});

6. Determine the cube type. Defaults to 3 (3x3).

$(".cube").cube({
  type: 2 // up to 9
});

7. Determine the delay between each turn. Defaults to 250ms.

$(".cube").cube({
  animation: {
    delay: 500
  }
});

8. Customize the cube & background colors.

$(".cube").cube({
  color: [
    0xff0000, //right
    0xff8000, //left
    0xffff00, //top
    0xffffff, //bottom
    0x0000ff, //front
    0x00ff00, //back
    0x000000 //cube color
  ],
  background: 0x1D1F20
});

9. Customize the cube size.

$(".cube").cube({
  size: {
    width: 60,
    height: 60
  }
});

10. Specify the camera position.

$(".cube").cube({
  camera: {
    x: 50,
    y: 50,
    z: 100
  }
});

11. Callback functions.

$(".cube").cube({
  onTurn: function(cube, move){
    console.info(move, "was made");
  },
  onComplete: function(cube){
    console.info("Finished");
  }
});

12. More API methods.

// Executes a single move
myCube.turn(move);

// Resets the cube
myCube.reset();

---

This awesome jQuery plugin is developed by godlikemouse. For more Advanced Usages, please check the demo page or visit the official website.