GameProgramming HW5

by Alan Lin

HTML

<div id="info">
  GameProgramming HW5
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<audio id="SE" style="display:none">
<source src="http://ysc.yisell.com/yisell/ycys2015718158529188/sound/yisell_sound_2014080415461763203_66366.mp3" type='audio/wav'>
</audio>

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	}
	
	#info {
	  position: absolute;
	  top: 0px;
	  width: 100%;
	  padding: 5px;
	  text-align: center;
	  color: #ffff00
	}

JavaScript

var camera, scene, renderer, light, controls;
var body, upperArmL, upperArmR, foreArmL, foreArmR;
var angle = 0;
var period = 1.5;
var clock = new THREE.Clock();
var SE, ss = 0, turn = false, turn2 = false;


var pose1 = {
		upperArmRZ: -3,
    upperArmLZ: -Math.PI/2,
    upperFootR: -0.4,
    upperFootL: 0.4,
    foreFootR: 0.0,
    foreFootL: 1.0,
};
var pose2 = {
		upperArmRZ: -Math.PI/2,
    upperArmLZ: 0.0,  
    upperFootR: 0.4,
    upperFootL: -0.4,
    foreFootR: 1.0,
    foreFootL: 0.0,
};
var pose3 = {
		upperArmRZ: -3,
    upperArmLZ: -Math.PI/2,
    upperFootR: -0.4,
    upperFootL: 0.4,
    foreFootR: 0.0,
    foreFootL: 1.0  
};
var pose4 = {
		upperArmRZ: 0.0,
    upperArmLZ: 3.14,
    
};
var pose5 = {
		upperArmRZ: 0,
    upperArmLZ: 3.5,
    batRZ: 1.53,
   
};
var pose6 = {
		upperArmRZ: 0,
    upperArmLZ: 4,
    batRZ: 1.34,
   
};
var pose7 = {
		upperArmRZ: 0.0,
    upperArmLZ: 4.5,
    batRZ: 1.18,
    
};
var pose8 = {
		upperArmRZ: 0.0,
    upperArmLZ: 5.5,
    batRZ: 1.0,
   
};

var keys = [	{s: 0,pose: pose1}, 
							{s: 0.5, pose: pose2}, 
              {s: 1,pose: pose3}
             ]; 
             
init();
animate();

function oneLink() {

  var arm = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(20, 5, 5),
    new THREE.MeshLambertMaterial({
      color: 0x000000
    }));
  mesh.position.set(10, 2.5, 0);
  arm.add(mesh);

  return arm;
}

function oneLink() {

  var arm = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(20, 5, 5),
    new THREE.MeshLambertMaterial({
      color: 0x000000
    }));
  mesh.position.set(10, 2.5, 2.5);
  arm.add(mesh);

  return arm;
}

function init() {
  scene = new THREE.Scene();
  
  SE = document.getElementById ('SE');
  
  THREE.ImageUtils.crossOrigin = '';

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

  light = new THREE.PointLight(0xffffff);
 ...