Keyframe animation

by omgazero

HTML

<div id="info">
  Keyframe animation
  <br><button id="Dance" style="width:20%">Start Dance</button> 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/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/dat.gui.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/Gyroscope.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ff0000;
}

#gui {
    position: absolute;
    top: 40px;
    left: 20px;
    height: 350px;
}

body {
  overflow: hidden;
}

JavaScript

var frame, scene, light, camera, renderer, controls;
var isDancing = false;

///

$('#Dance').click ( function() {
	isDancing = !isDancing;
	if (isDancing) { 
		$('#Dance').text ('Stop Dance')
	} else {
		$('#Dance').text ('Start Dance')
	}
});

var clock = new THREE.Clock();

var period = 2; // 3 seconds
var pose1 = {
  sZ_leftArm: -1,
  sX_leftArm: 0.4,
  sY_leftArm: 1,
  eX_leftArm: -1.6,
  
  sZ_rightArm: 1.6,
  sX_rightArm: 0.9,
  sY_rightArm: -0.6,
  eX_rightArm: -2,
  
  sZ_leftLeg: -0.3,
  sX_leftLeg: -0.6,
  sY_leftLeg: 0,
  eX_leftLeg: 0.75,
  
  sZ_rightLeg: 0.4,
  sX_rightLeg: -0.8,
  sY_rightLeg: 0.5,
  eX_rightLeg: 0.6, 
  
  sX_head: 0.1,
  sY_head: 0.1,
  sZ_head: 0,
  
  posY: 35, 
  posZ: 0
};
var pose2 = {
  sZ_leftArm: -1,
  sX_leftArm: 0.4,
  sY_leftArm: 1,
  eX_leftArm: -1.6,
  
  sZ_rightArm: 1.4,
  sX_rightArm: -1.3,
  sY_rightArm: -0.2,
  eX_rightArm: -1.7,
  
  sZ_leftLeg: -0.3,
  sX_leftLeg: -0.6,
  sY_leftLeg: 0,
  eX_leftLeg: 0.75,
  
  sZ_rightLeg: 0.4,
  sX_rightLeg: -0.8,
  sY_rightLeg: 0.5,
  eX_rightLeg: 0.6, 
  
  sX_head: 0.1,
  sY_head: -0.5,
  sZ_head: 0.5,
  
  posY: 35-2, 
  posZ: 0
};
var pose3 = {
  sZ_leftArm: 0.2,
  sX_leftArm: -1,
  sY_leftArm: 0.6,
  eX_leftArm: -0.5,
  
  sZ_rightArm: -0.2,
  sX_rightArm: -0.8,
  sY_rightArm: -0.3,
  eX_rightArm: -0.5,
  
  sZ_leftLeg: -0.3,
  sX_leftLeg: -0.6,
  sY_leftLeg: 0,
  eX_leftLeg: 0.75,
  
  sZ_rightLeg: 0.4,
  sX_rightLeg: -0.8,
  sY_rightLeg: 0.5,
  eX_rightLeg: 0.6, 
  
  sX_head: 0.1,
  sY_head: 0.1,
  sZ_head: 0,
  
  posY: 35, 
  posZ: 0
};

var keys = [{s: 0,pose: pose1}, {s: 0.25, pose: pose2}, {s: 0.75, pose: pose3}, {s: 1,pose: pose1}];

///
init();
animate();


function init() {
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(60, window.innerWidth /...