ThreeJS - Rubik's Cube Solver

by Bintang Anandhiya

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

canvas {
  width: 100%;
  height: 100%;
  float: left;
}

JavaScript

var renderer;
var scene;
var camera;
var control;
var grid;
var mouse = new THREE.Vector2();

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(30,window.innerWidth / window.innerHeight,0.1,1000);
camera.position.z = 50;

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );



//Controls
control = new THREE.OrbitControls(camera);
grid = new THREE.GridHelper(100, 10);
scene.add(grid);

//> Cubes
var geometry = new THREE.BoxGeometry( 5, 5, 5 );
//Core Cube
var coreMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF});
var coreCube = new THREE.Mesh(geometry, coreMaterial);

//Side Cubes
var sideMaterial = [ 
    new THREE.MeshBasicMaterial({color:0xff0000}),
    new THREE.MeshBasicMaterial({color:0x00ff00}), 
    new THREE.MeshBasicMaterial({color:0x0000ff}),
    new THREE.MeshBasicMaterial({color:0xffff00}), 
    new THREE.MeshBasicMaterial({color:0xff00ff}), 
    new THREE.MeshBasicMaterial({color:0x00ffff}), 
]; 

var sideCubesPosTamplate = [
	[-1,1,1],[0,1,1],[1,1,1],
  [-1,0,1],[0,0,1],[1,0,1],
  [-1,-1,1],[0,-1,1],[1,-1,1],
  
  [-1,1,0],[0,1,0],[1,1,0],
  [-1,0,0],					[1,0,0],
  [-1,-1,0],[0,-1,0],[1,-1,0],
  
  [-1,1,-1],[0,1,-1],[1,1,-1],
  [-1,0,-1],[0,0,-1],[1,0,-1],
  [-1,-1,-1],[0,-1,-1],[1,-1,-1],
  
]

var sideCubes = [];
for(var i = 0; i < 26; i++){
	var thisPosTamplate = sideCubesPosTamplate[i]
	sideCubes[i] = new THREE.Mesh(geometry, sideMaterial);
	sideCubes[i].position.x = 5.2 * thisPosTamplate[0];
  sideCubes[i].position.y = 5.2 * thisPosTamplate[1];
  sideCubes[i].position.z = 5.2 * thisPosTamplate[2];
	scene.add(sideCubes[i]);
}

scene.add(coreCube);

//Main Loop
function onMouseMove(event){
	mouse.x = (event.clientX / window.innerWidth * 2) - 1;
  mouse.y = (event.clientY / window.innerHeight * 2) + 1;
	console.log(mouse.x + " " + mouse.y);
}

function render(){
	requestAnimationFrame(render);
 ...