CG_HW2p

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>
<script src="https://cdn.rawgit.com/ikatyang/dat.GUI.animate/master/dat.gui.animate.js"></script>
<h1>CG_HW2p</h1>
<audio id="audio" src="https://www.dropbox.com/s/ip49ni1e5xkuq6e/HW2p.mp3?raw=1"></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 guis = {};
var clock = new THREE.Clock();
var gcontrols = {
	action: 'Run',
	animate: false,
  perspective: 'god',
  speed: 1,
};
var guiData = {
  'Run': {
  	load: getLoadRun(),
    tickLength: 1,
  },
  'Dance': {
  	load: getLoadDance(),
    tickLength: 6.25,
  },
};

init();
animate();

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 100, 300);
  scene.add(camera);
  
	var lightA = new THREE.PointLight(0xffffff);
  lightA.position.set(100, 150, 100);
	scene.add(lightA);
  
	var lightB = new THREE.HemisphereLight(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);
  
  var ring = new THREE.Mesh(
  	new THREE.RingGeometry(45, 55, 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); 
	
  for (var name in guiData) {
  	var gui = guis[name] = new dat.GUI({ load: guiData[name].load });
    gui.add(gcontrols, 'animate').name('Animate').listen().onChange(onChangeAnimate);
    gui.add(gcontrols, 'action', Object.keys(guiData)).name('Action').listen().onChange(onChangeAction);
    gui.add(gcontrols, 'perspective', {
    	'God\'s': 'god',
      '3rd Person': '3rd'
    }).name('Perspective').listen().onChange(onChangePerspective);
    gui.add(gcontrols, 'speed', 0,...