Threejs - Template ES5 - w/ DatGUI

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>

CSS

body {
  margin:0;
}

JavaScript

var objects = []; 
var scene = new THREE.Scene();

var width = window.innerWidth;
var height = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);

var grid = new THREE.GridHelper(fti(12), 12);
scene.add(grid);

// ----- playground starts here ----------------- //
// ---- your code here ------/
var sphere = createSphere(1, new THREE.Vector3(3,3,3));

createLight();

var wallGeo = new THREE.BoxGeometry(10,5,1);
var wall = new THREE.Mesh(wallGeo, new THREE.MeshLambertMaterial({color:0x005500}));
wall.translateY(5);
scene.add(wall);

createUI(sphere);

createShape();

let Obj = function(val){
	this.x = val;
}

let o1 = new Obj(1);
let o2 = new Obj(1);

let v1 = new THREE.Vector3(1, 2, 3);
let v2 = new THREE.Vector3(1, 2, 3);
if(o1 === o2) {
	console.log('equal');
} else {
	console.log('not euqual');
}

// ---- end of playground ---------------------- //
function createLight(){
  var dirLight = new THREE.DirectionalLight();
  dirLight.position.set(3, 2, 1);
  dirLight.position.multiplyScalar(10);
  scene.add(dirLight);
}

function createLine(points, color){
	color = color || 0xff0000;
	var geo = new THREE.Geometry();
  geo.vertices.push(...points);
  var line = new THREE.Line(geo, new THREE.LineBasicMaterial({color: color}));
  scene.add(line);
  console.warn('line addded');
}

function createSphere(size, position){
	if(!size){
  	size = 3;
  }
	var mesh = new THREE.Mesh(new...