ThreeJS - Orbital Camera

by Bintang Anandhiya

HTML

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/keyboardjs/2.3.3/keyboard.min.js"></script>

CSS

body {
  margin: 0;
}
canvas {
  float: left;
}

JavaScript

scene = {};
var renderer;
var control;
var mesh;
var grid;
var camera;
var orbitAngleHor = 0;
var orbitAngleVer = 0;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 30, window.innerWidth/window.innerHeight, 0.1, 1000 );

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);
scene.add(new THREE.AxisHelper( 100 ));

function d2r(degrees){
	return degrees * Math.PI / 180;
}

//Objects
function createCubie(sides){
  //>>initialize cubie
  var tempCubieMaterial = new THREE.MeshBasicMaterial({color: 0x555555});
  var tempCubieGeometry = new THREE.BoxGeometry(5, 5, 5);
  var tempCubieMesh = new THREE.Mesh(tempCubieGeometry, tempCubieMaterial);
  tempCubieMesh.name = "cubie";
  tempCubieMesh.cubieType = sides;
  tempCubieMesh.cubiePosition = {
    x:0,
    y:0,
    z:0,
  }


  //>>initialize sides
  var tempSideMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF});
  var tempSideGeometry = new THREE.BoxGeometry(0.5, 4.6, 4.6);

  var tempTopSideMesh = new THREE.Mesh(tempSideGeometry, tempSideMaterial.clone());
  tempTopSideMesh.rotation.z = 90 * Math.PI / 180;
  tempTopSideMesh.position.y = 2.5;

  tempCubieMesh.add(tempTopSideMesh);

  tempCubieMesh.sides = [{
    mesh: tempCubieMesh.children[0],
    color: "blank",
    facing: "",
    setColor: function(cubeColorCode,hexColor){
      this.color = cubeColorCode;
      this.mesh.material.color.setHex(hexColor);
    }
  }];

  if(sides > 1){
    var tempFrontSideMesh = new THREE.Mesh(tempSideGeometry, tempSideMaterial.clone());
    tempFrontSideMesh.position.x = 2.5;

    tempCubieMesh.add(tempFrontSideMesh);
    tempCubieMesh.sides[1] = {
      mesh: tempCubieMesh.children[1],
      color: "blank",
      facing: "",
      setColor: function(cubeColorCode,hexColor){
        this.color...