This time I will share jQuery Plugin and tutorial about Create A Realistic Self-solving Rubik’s Cube With Three.js, hope it will help you in programming stack.
A funny jQuery plugin that lets you render a realistic, self-solving Rubik’s Cube (up to 9×9) 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.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<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:
2 |
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.
1 |
<script src="jquery.cube.threejs.min.js"></script> |
4. Render a basic (3×3) 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.
2 |
const myCube = $(".cube").cube(); |
3 |
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 (3×3).
7. Determine the delay between each turn. Defaults to 250ms.
8. Customize the cube & background colors.
9. Customize the cube size.
10. Specify the camera position.
11. Callback functions.
2 |
onTurn: function(cube, move){ |
3 |
console.info(move, "was made"); |
5 |
onComplete: function(cube){ |
6 |
console.info("Finished"); |
12. More API methods.
This awesome jQuery plugin is developed by godlikemouse. For more Advanced Usages, please check the demo page or visit the official website.
