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.

(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.

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.

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