An implementation of a Rubik's Cube using jQuery and ThreeJS with the ability to read old and new cube notation for executing moves. Supports cube sizes from 2x2 up about 9x9.
| Browser | Compatibility |
|---|---|
| Chrome | Perfect |
| Firefox | Perfect |
| Opera | Perfect |
| Safari | Perfect |
| IE | Perfect - Has not been tested on browsers earlier than IE 11 |
(Requires jQuery and ThreeJS) Include the jquery.cube.threejs.js or jquery.cube.threejs.min.js file. Create an HTML container for the cube, implement a script block, initialize the cube plugin and send commands to the plbugin by use of the execute() method or by adding a data-moves parameter.
Create an HTML container for the cube.
<div class="cube"></div>
In JavaScript, initialize the plugin and execute some commands.
var cube = $(".cube").cube();
cube.execute("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'");
The following table specifies the options available to be used in conjunction with the plugin.
| Name | Description |
|---|---|
| type | Specifies the size of the cube to use. (default 3), to create a larger cube increase this value. 4 for 4x4, 5 for 5x5, etc. |
| camera.x | Specifies the camera's x position. (default 50) |
| camera.y | Specifies the camera's y position. (default 50) |
| camera.z | Specifies the camera's z position. (default 100) |
| size.width | Controls the cube width in pixels. (default 60) |
| size.height | Controls the cube height in pixels. (default 60) |
| color | Array sepcifying edge colors. [ right, left, top, bottom, font, back, cube ] (default [0xff0000, 0xff8000, 0xffff00, 0xffffff, 0x0000ff, 0x00ff00, 0x000000]) |
| background | Specifies the background color. (default 0x1d1f20) |
| animation.delay | Specifies the animation delay in ms for turns. (default 250) |
| onTurn | Callback function invoked when a turn or move is made. (function (cube, move)) |
| onComplete | Callback function invoked when all turns or moves for an execution is complete. (function (cube)) |
var cube = $(".cube").cube({
animation: {
delay: 500 //half a second per turn animation
},
colors: [0xff0000,
0xff8000,
0xffff00,
0x000000, //black side instead of white
0x0000ff,
0x00ff00],
onTurn: function(cube, move){
console.info(move, "was made");
}
});
Moves can also be specified as a data-moves attribute in the HTML tag.
<div class="cube" data-moves="U R U' R'"></div>
The following table specifies the API methods available for the cube plugin.
| Method | Description |
|---|---|
| execute (moves) | Executes a set of moves specified by the moves string. (example: cube.execute("U R U' R'")) |
| turn (move) | Executes a single move specified by the move string. (example: cube.turn("R")) |
| reset | Resets the cube back to its initial state |
Living object reference is availble by accessing the following:
var cube = $(".cube").data("_cube");
cube.execute("U R U' R'");
Keep track of development and community news.
- Follow @Collaboradev on Twitter.
- Follow the Collaboradev Blog.
jquery.cube.js is released under GPL, version 2.0