CG_HW2p - origin

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.1/dat.gui.min.js"></script>
<h1>CG_HW2p</h1>
<audio id="audio" src="https://www.dropbox.com/s/ip49ni1e5xkuq6e/HW2p.mp3?raw=1" loop="loop"></audio>

CSS

h1 {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  color: #ffff00
}
body {
  margin: 0;
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var controls;
var danboard;
var scale = 0.2;
var clock;
var gcontrols = {
	action: 'run',
	perspective: 'god',
  speed: 1,
	_action: null,
  _perspective: null,
  _speed: null,
};
var armLength = 150;
var legLength = 150;

init();
animate();

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000 * scale);
  scene.add(camera);
  
	var lightA = new THREE.PointLight(0xffffff);
  lightA.position.set(500 * scale, 750 * scale, 500 * scale);
	scene.add(lightA);
  
	var lightB = new THREE.HemisphereLight(0xffffff);
  lightB.position.set(-500 * scale, 750 * scale, -500 * scale);
	scene.add(lightB);

  var gridXZ = new THREE.GridHelper(500 * scale, 50 * scale);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  scene.add(gridXZ);
  
  var ring = new THREE.Mesh(
  	new THREE.RingGeometry(225 * scale, 275 * scale, 32),
    new THREE.MeshBasicMaterial({ color: 'blue' })
  );
  ring.rotation.x = -Math.PI / 2;
  scene.add(ring);

  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();
  scene.add(danboard); 

  var gui = new dat.GUI();
  gui.add(gcontrols, 'action', {
  	'Run': 'run',
    'Dance': 'dance',
  }).onChange(onChangeAction).name('Action');
  gui.add(gcontrols, 'perspective', {
  	'God\'s': 'god',
    '3rd Person': '3rd',
  }).onChange(onChangePerspective).name('Perspective');
  gui.add(gcontrols, 'speed', 0, 10).name('Speed').onChange(onChangeSpeed);
  addGui(gui, 'danbo',    'position', -300 * scale, 300 * scale, ['x', 'z']);
  addGui(gui, 'head',     'rotation', -Math.PI / 1, Math.PI / 1, ['x', 'y', 'z']);
  addGui(gui, 'body',    ...