Interpolate

Euler or Quaternion

by Alvin Chen

HTML

<div id="info">
  <button id="throw" style="width:20%">Throw</button>
</div>

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

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	}
	
	#info {
	  position: absolute;
	  top: 350px;
	  width: 100%;
	  padding:0px;
	  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;
var clock = new THREE.Clock();

var gcontrols;

var dt = 0;

/*
   "standby": {
      "0": {
        "shoulderZ": -0.157,
        "shoulderY": -0.05,
        "shoulderX": -0.39,
        "elbowX": -1.3437895420246853,
        "torsoY": 0
      }
    },
    "start": {
      "0": {
        "shoulderZ": -1.2916156805606553,
        "shoulderY": -1.5575268979053642,
        "shoulderX": 0.08494620418927168,
        "elbowX": -1.7717576509262987,
        "torsoY": -0.2838148489204837
      }
    },
    "halfSwing": {
      "0": {
        "shoulderZ": -2.337047996216274,
        "shoulderY": -1.645969656086328,
        "shoulderX": -0.2946389222483523,
        "elbowX": -0.9076169282508761,
        "torsoY": -0.05758630535279474
      }
    },
    "swing": {
      "0": {
        "shoulderZ": -2.9181938816672788,
        "shoulderY": -1.3335532930742775,
        "shoulderX": -0.3630010054729018,
        "elbowX": -0.11001800217952606,
        "torsoY": 0.10673064765700913
      }
    }
*/

var keys = [
[0, [-0.419, 0.783, -0.315, -1.67, 0,1.144,-1.414,0.439,-1.471,0.057]],// default
[0.15, [-0.419, 0.783, -0.31, -1.67, 0,1.144,-1.414,0.439,-1.471,0.655]],  // standby
[0.25, [-0.419, 0.783, -0.31, -1.67, 0,1.144,-1.414,0.439,-1.471,0.057]],  // standbyFin
[0.5, [-0.419, -0.59, -0.178, -1.67, -0.009,1.144,-1.414,0.439,-1.47,0.057]], // firstMove
[0.7, [-1.37, -1.48, -0.178, -1.67, -0.142,1.284,-0.933,0.714,-0.939,0.057]], // secondMove
[0.8, [-1.303, -1.48, 0.851, -2.069, -0.408,1.348,-0.453,0.645,-1.272,0.057]], // thirdMove
[0.85, [-1.303, -1.483, 0.371, -2.01,-0.350,1.348,-0.453,0.645,-1.272,0.057]], // swing
[0.9, [-1.439, -1.620, 0.027, -2.01, -0.275,1.348,-0.453,0.645,-1.272,0.057]], // swingMove1
[0.95, [-1.37, -1.55, -1.48, 0.322, -0.0093,1.484,-1.139,0.988,-0.607,0.057]],];
var T = 3;
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();
var intKey=[];

$("#throw").click(function()...