CG_HW2

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<h1>CG_HW2</h1>

CSS

h1 {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  color: #ffff00
}
body {
  margin: 0;
  overflow: hidden;
}
.folder .dg ul {
  margin-top: 0 !important;
}

JavaScript

var camera, scene, renderer;
var controls;
var danboard;

init();
animate();

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.y = 100;
  camera.position.z = 300;
  scene.add(camera);
  
	var lightA = new THREE.HemisphereLight(0xffffff);
  lightA.position.set(100, 150, 100);
	scene.add(lightA);
  
	var lightB = new THREE.PointLight(0xffffff);
  lightB.position.set(-100, 150, -100);
	scene.add(lightB);

  var gridXZ = new THREE.GridHelper(100, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), 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);

  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  
  danboard = createDanboard(0.2);
  scene.add(danboard); 

  var gui = new dat.GUI({ load: getGuiJson() });
  addGui(gui, 'head');
  addGui(gui, 'body');
  addGui(gui, 'armLeft');
  addGui(gui, 'armRight');
  addGui(gui, 'legLeft');
  addGui(gui, 'legRight');
  var f = gui.addFolder('skirt');
  f.add(danboard.skirt, 'visible');
  gui.close();
}

function addGui(gui, name) {
  var f = gui.addFolder(name);
  gui.remember(danboard[name].rotation);
  f.add(danboard[name].rotation, 'x', -Math.PI / 6, Math.PI / 6);
  f.add(danboard[name].rotation, 'y', -Math.PI / 6, Math.PI / 6);
  f.add(danboard[name].rotation, 'z', -Math.PI / 6, Math.PI / 6);
}

function createDanboard(scale) {
	
  var delta = 0 * scale;
	
  var danboard = new THREE.Object3D();
  danboard.position.y = 125 * scale + delta;
  
  THREE.ImageUtils.crossOrigin = '';
  var basicMaterial = new THREE.MeshLambertMaterial({
    side: THREE.DoubleSide,
    map: THREE.ImageUtils.loadTexture('//i.imgur.com/eORQGFi.png')
  });
  
  var headMaterialArray = [
...