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

File Size: 25.3 KB 1950 03/14/2020 02:43:00 UTC 02/21/2020 02:15:57 UTC Go to website MIT

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.