HW5

Euler or Quaternion

by oKLo

HTML

<div id="info">
  Keyframe Setter
  <br>
</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
	}
	
	a {
	  color: #00ffff
	}
	
	strong {
	  color: red
	}
	
	#container {
	  z-index: 0;
	  left: 0px;
	  top: 0px;
	  overflow: hidden;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	}
#gui {
    position: absolute;
    top: 10px;
    right: 10px;
    //height: 350px;
}

JavaScript

var scene, renderer, camera;
var controls;
var torso, lowerArm, upperArm,upperleg,leftupperleg;
var clock = new THREE.Clock();

var gcontrols;

var dt = 0;

var keys = [
[0, [-0.488,-0.62,0.20,-1.09, 0.488,0.62,0.22,-1,0.01,0.01,0.01]],
[0.125,[-0.488,0.48,0.20,-1.09, 0.488,0.62,0.22,-1,0.01,0.01,0.01]],
[0.275, [-0.488,-0.62,0.20,-1.09, 0.488,0.62,0.22,-1,0.01,0.01,0.01]],
[0.4,[-0.488,-0.62,0.20,-1.09, 0.488,-0.58,0.22,-1,0.01,0.01,0.01]],
[0.5,[-0.488,-0.62,0.20,-1.09, 0.488,0.62,0.22,-1,0.01,0.01,0.01]],
[0.625, [-0.488,0.48,0.20,-1.09, 0.488,0.62,0.22,-1,0.01,0.01,0.01]],
[0.775,[-0.488,-0.62,0.20,-1.09, 0.488,0.62,0.22,-1,0.01,0.01,0.01]],
[0.9, [-0.488,-0.62,0.20,-1.09, 0.488,-0.58,0.22,-1,0.01,0.01,0.01]],
[1, [-0.488,-0.62,0.20,-1.09, 0.488,0.62,0.22,-1,0.01,0.01,0.01]],
];
var T = 10;
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();
var intKey=[];

/////////////////////////////////////////////////////

init();
animate();


function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x888888);

  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 boxGeometry = new THREE.BoxGeometry(50, 80, 30);
  torso = new THREE.Object3D();
  var bodyMesh = new THREE.Mesh(boxGeometry, new THREE.MeshNormalMaterial());
  bodyMesh.position.set(0, 80, 0);
  torso.add(bodyMesh);
  scene.add(torso);
  //torso.position.set(0, 0, -35);

  var boxGeometry = new THREE.BoxGeometry(10, 30, 10);
  var arm = new THREE.Mesh(boxGeometry, new THREE.MeshNormalMaterial());
  upperArm = new THREE.Object3D();
  upperArm.add(arm);
 ...