HW2p-2

by YouTingKuo

HTML

<div id="info">HW2<br/>
   <button id="viewpoint" style="width:15%">third</button>
   <button id="walk" style="width:15%">dance</button>
   <div id="intro">press left/right to control speed </div>
   <div id="speedShow"></div>
</div>
<audio id="audio" src="http://homepage.ttu.edu.tw/u10206217/6sec.mp3"></audio>
<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://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

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

#speedShow {
    color: white;
}

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls;
var leftLeg, rightLeg, body, head, move;
var frontSkirt, backSkirt, leftSkirt, rightSkirt;
var viewpoint = true, walk = true;
var clock = new THREE.Clock();
var clock2 = new THREE.Clock();
var keyboard = new KeyboardState();
var period = 6.1;
var v = 100;
var pose0 = {
	headAngle1:0, headAngle2:0, headAngle3:0,
  bodyAngle1:0, bodyAngle2:0, bodyAngle3:0,
  leftArmAngle1:0, leftArmAngle2:0, leftArmAngle3:0,
  rightArmAngle1:0, rightArmAngle2:0, rightArmAngle3:0,
  leftLegAngle1:0,leftLegAngle2:0, leftLegAngle3:0,
  rightLegAngle1:0, rightLegAngle2:0,rightLegAngle3:0
};
var pose1 = {
	headAngle1:0, headAngle2:0, headAngle3:0,
  bodyAngle1:0.051438, bodyAngle2:0, bodyAngle3:0,
  leftArmAngle1:-1.596457, leftArmAngle2:0, leftArmAngle3:0,
  rightArmAngle1:-0.810769, rightArmAngle2:0, rightArmAngle3:0,
  leftLegAngle1:-0.097965,leftLegAngle2:0, leftLegAngle3:0,
  rightLegAngle1:-0.097965, rightLegAngle2:0,rightLegAngle3:0
}
var pose2 = {
	headAngle1:0, headAngle2:0, headAngle3:0,
  bodyAngle1:0.051438, bodyAngle2:0, bodyAngle3:0,
  leftArmAngle1:-0.810769, leftArmAngle2:0, leftArmAngle3:0,
  rightArmAngle1:-1.596457, rightArmAngle2:0, rightArmAngle3:0,
  leftLegAngle1:-0.097965,leftLegAngle2:0, leftLegAngle3:0,
  rightLegAngle1:-0.097965, rightLegAngle2:0,rightLegAngle3:0
}
var pose3 = {
	headAngle1:0.415388, headAngle2:-0.213251, headAngle3:-0.180889,
  bodyAngle1:0.205841, bodyAngle2:0, bodyAngle3:0,
  leftArmAngle1:0, leftArmAngle2:0, leftArmAngle3:0,
  rightArmAngle1:0, rightArmAngle2:0, rightArmAngle3:-1.585760,
  leftLegAngle1:-0.198982,leftLegAngle2:0, leftLegAngle3:0,
  rightLegAngle1:-0.198982, rightLegAngle2:0,rightLegAngle3:0
}
var pose4 = {
	headAngle1:0.415388, headAngle2:0.213251, headAngle3:0.180889,
  bodyAngle1:0.205841, bodyAngle2:0, bodyAngle3:0,
  leftArmAngle1:0, leftArmAngle2:0, leftArmAngle3:1.585760,
  rightArmAngle1:0, rightArmAngle2:0, rightArmAngle3:0,
  leftLegAngle1:-0.198982,leftLegAngle2:0,...