CGhw2 helper 0

Opening box

HTML

<div id="info">Homework 2 Helper
  <br>
  <br> Opening Box
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">


</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

#gui {
  position: absolute;
  top: 50px;
  right: 10px;
  height: 500px;
  //text-align: center;
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var controls; 
var box, frame;
var angle = 0;

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 200;
  scene.add(camera);

  var gridXZ = new THREE.GridHelper(50, 10);
  gridXZ.setColors(new THREE.Color(0xff00ff), new THREE.Color(0xffffff));
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  var light = new THREE.PointLight(0xffffff, 1);
  light.position.set(150, 150, 150);
  scene.add(light);
  var amblight = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(amblight);
  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  ///////////////////////////////////////////////////////////////
  var lid = makeLid();
  box = makeBox();

  frame = new THREE.Object3D();
  frame.position.set(0, 20, -15);
  //box.add(frame);
  frame.add(lid);
  scene.add(box);

	box.position.y = 20;
}

function makeBox() {
	var materials = [];
  // must give 6 materials for box geometry
  materials.push(new THREE.MeshLambertMaterial({side:THREE.DoubleSide}));
  materials.push(new THREE.MeshLambertMaterial({side:THREE.DoubleSide}));
  materials.push(new THREE.MeshLambertMaterial({visible:false}));
  materials.push(new THREE.MeshLambertMaterial({side:THREE.DoubleSide}));
  materials.push(new THREE.MeshLambertMaterial({side:THREE.DoubleSide}));
  materials.push(new THREE.MeshLambertMaterial({side:THREE.DoubleSide}));

  box = new THREE.Mesh(new THREE.BoxGeometry(50, 40, 30),
    new THREE.MeshFaceMaterial(materials));
  return box;
}

function makeLid() {
  var lid = new THREE.Object3D();
  var lidPlane = new THREE.Mesh(new THREE.PlaneGeometry(50, 30),
    new THREE.MeshLambertMaterial({
  ...