HW3

with orbitControls, XZgrid, info

by jason870509

HTML

<div id="info">hw3<br>
  <button id="play" style="width:20%">Play Sound</button>
</div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.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>
<audio id="soundtrack" autoplay loop style="display:none">
  <source src="sounds/sorry.mp3" type='audio/wav'>
</audio>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, light, controls;
var gcontrol, body;
var T = 7.3;
var pose1 = {
  headX: 0.3,
  headY: -0.0028789161727349466,
  headZ: 0,
  bodyX: 0.0364238410596025,
  bodyY: 0.06071126164267571,
  rUpperArmX: -0.07366638441998319,
  rUpperArmZ: 0.01447925486875512,
  rLowerArmX: -0.5,
  rLowerArmZ: 0.1,
  lUpperArmX: 0.1,
  lUpperArmZ: -0.07222692633361572,
  lLowerArmX: 0.1,
  lLowerArmZ: 0.1,
  rUpperFeetX: 0.1,
  rUpperFeetY: 0.1,
  rUpperFeetZ: 0.1,
  rLowerFeetX: 0.1,
  lUpperFeetX: 0.1,
  lUpperFeetY: 0.1,
  lUpperFeetZ: 0.1,
  lLowerFeetX: 0.1
}
var pose2 = {
  headX: 0.23324301439458078,
  headY: 0.6257408975444538,
  headZ: 0,
  bodyX: 0.0364238410596025,
  bodyY: -0.4920406435224385,
  rUpperArmX: -1.0003386960203218,
  rUpperArmZ: -0.41905165114309906,
  rLowerArmX: -0.5071972904318374,
  rLowerArmZ: 1.1404741744284506,
  lUpperArmX: -0.8540220152413207,
  lUpperArmZ: 0.3179508890770535,
  lLowerArmX: 0.1,
  lLowerArmZ: 0.1,
  rUpperFeetX: -0.1791701947502118,
  rUpperFeetY: 0.1,
  rUpperFeetZ: -0.43640982218458935,
  rLowerFeetX: 0.30347163420829804,
  lUpperFeetX: 0.1,
  lUpperFeetY: 0.7991532599491955,
  lUpperFeetZ: 0.300592718035563,
  lLowerFeetX: 0.1
}
var pose3 = {
  headX: 0.3,
  headY: -0.4489686098654708,
  headZ: 0,
  bodyX: -0.07589403973509934,
  bodyY: 0.3941704035874438,
  rUpperArmX: -0.7786547085201794,
  rUpperArmZ: 0.11739910313901358,
  rLowerArmX: -0.5,
  rLowerArmZ: 0.1,
  lUpperArmX: -1.0231660231660231,
  lUpperArmZ: 0.025954525954525742,
  lLowerArmX: 0.21943371943371942,
  lLowerArmZ: 0.9236808236808236,
  rUpperFeetX: -0.4761904761904763,
  rUpperFeetY: -1,
  rUpperFeetZ: -0.2861432861432861,
  rLowerFeetX: 0.27456027456027454,
  lUpperFeetX: -0.35263835263835275,
  lUpperFeetY: 0.07078507078507079,
  lUpperFeetZ: 0.29043329043329047,
  lLowerFeetX: 0.7687687687687688
}
var pose4 = {
  headX: -0.2521395928541753,
  headY: 0.1,
  headZ: 0,
  bodyX: -0.07589403973509934,
  bodyY: 0.09534690486082242,
 ...