hw5

keyframe interpolation

by YouTingKuo

HTML

<div id="info">hw5
  <br/>
    <button id="isOn" style="width:15%">dance</button>
</div>

<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://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>

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 robot = function (){
	this.body = new THREE.Object3D();
  var boxGeometry = new THREE.BoxGeometry(50, 80, 30);
  THREE.ImageUtils.crossOrigin = '';
  var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/gyZe4Q5.png');
  this.bodyMesh = new THREE.Mesh(boxGeometry, new THREE.MeshLambertMaterial({map: texture}));
  this.bodyMesh.position.set(0, 110, 0);
  this.body.add(this.bodyMesh);
  
  var headMaterialArray = [];
  headMaterialArray.push(new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('http://i.imgur.com/dV4fDhr.png'), side:THREE.DoubleSide}));
  headMaterialArray.push(new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('http://i.imgur.com/dV4fDhr.png'), side:THREE.DoubleSide}));
  headMaterialArray.push(new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('http://i.imgur.com/O5v9bWa.png'), side:THREE.DoubleSide}));
  headMaterialArray.push(new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('http://i.imgur.com/86wXVHm.png'), side:THREE.DoubleSide}));
  headMaterialArray.push(new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('http://i.imgur.com/ulozSTL.png'), side:THREE.DoubleSide}));
  headMaterialArray.push(new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('http://i.imgur.com/dV4fDhr.png'), side:THREE.DoubleSide}));
    
  this.h = new THREE.Mesh(new THREE.BoxGeometry(40, 30, 40), new THREE.MeshFaceMaterial(headMaterialArray));
  this.head = new THREE.Object3D();
  this.head.add(this.h);
  this.h.position.set(0, 15, 0);
  this.body.add(this.head);
  this.head.position.set(0, 150, 0);
  
  var boxGeometry = new THREE.BoxGeometry(10, 30, 10);
  this.arm = new THREE.Mesh(boxGeometry, new THREE.MeshLambertMaterial({color: 0x22b14c}));
  this.upperRightArm = new THREE.Object3D();
  this.upperRightArm.add(this.arm);
  this.arm.position.set(-5, -15, 0);
  this.body.add(this.upperRightArm);
  this.upperRightArm.position.set(-25, 150,...