hw5

keyframe interpolation

by oKLo

HTML

<div id="info">
  Drum Beater
  <br> Keyframe Interpolation
</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://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 scene, renderer, camera, controls;
var body, lowerArm, upperArm;

var angle = 0;
var sign = 1;

var gcontrols;
var theta1 = 0,
  theta2 = 0,
  theta3 = 0;
var torsoTurn = 0;

init();
animate();

function buildBody () {
  var body = new THREE.Object3D();
  var boxGeometry = new THREE.BoxGeometry(50, 100, 30);
  var bodyMesh = new THREE.Mesh(boxGeometry, new THREE.MeshNormalMaterial());
  bodyMesh.position.set(0, 50, 0);
  body.add(bodyMesh);

  var boxGeometry = new THREE.BoxGeometry(10, 40, 10);
  var arm = new THREE.Mesh(boxGeometry, new THREE.MeshNormalMaterial());
  upperArm = new THREE.Object3D();
  upperArm.add(arm);
  arm.position.set(-5, -20, 0);
  body.add(upperArm);
  upperArm.position.set(-25, 100, 0);

	boxGeometry = new THREE.BoxGeometry(10, 60, 10);
  arm2 = new THREE.Mesh(boxGeometry, new THREE.MeshNormalMaterial());
  lowerArm = new THREE.Object3D();
  lowerArm.position.set(0, -40, 0);
  upperArm.add(lowerArm);
  lowerArm.add(arm2);
  arm2.position.set(-5, -30, 0);

	return body;
}

function init() {

	var width = window.innerWidth;
  var height = window.innerHeight;

  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);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  scene.add(camera);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

	var gridXZ = new THREE.GridHelper(100, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  scene.add(gridXZ);
  window.addEventListener('resize', onWindowResize, false);

  /////////////////////////////////////////////////
  body = buildBody ();
  scene.add(body);
  body.position.set(0, 0, -35);
  body.rotation.y...