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

File Size: 25.3 KB
Views Total: 2276
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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')">

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.


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

<div class="cube">
  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).

  type: 2 // up to 9

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

  animation: {
    delay: 500

8. Customize the cube & background colors.

  color: [
    0xff0000, //right
    0xff8000, //left
    0xffff00, //top
    0xffffff, //bottom
    0x0000ff, //front
    0x00ff00, //back
    0x000000 //cube color
  background: 0x1D1F20

9. Customize the cube size.

  size: {
    width: 60,
    height: 60

10. Specify the camera position.

  camera: {
    x: 50,
    y: 50,
    z: 100

11. Callback functions.

  onTurn: function(cube, move){, "was made");
  onComplete: function(cube){"Finished");

12. More API methods.

// Executes a single move

// Resets the cube

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