跳舞

by FatHomebody

HTML

<div id="info">hw3 Keyframe Animation<br/><br/>
  <button id="play" style="width:20%">Pause</button>
</div>
<audio id="soundtrack" autoplay loop style="display:none">
<source src="https://godmilk.github.io/GameProgramming/sounds/Pharrell_Williams-Happy.mp3" type='audio/mp3'>
</audio>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/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>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var soundTrack = $('#soundtrack').get(0);
var isPaused = false;
$('#play').click(function() {
  isPaused = !isPaused;
  if (isPaused) {
    $('#play').text('Play')
    soundTrack.pause()
  } else {
    $('#play').text('Pause')
    soundTrack.play()
  }
});
var scene, renderer, camera;
var body, leftArm, rightArm, leftLeg, rightLeg;
var gcontrols = {
  lsZ: 0.01, // ls for left shoulder
  lsX: 0.02,
  lsY: 0.01,
  rsZ: 0.01, // rs for right shoulder
  rsX: 0.02,
  rsY: 0.01,
  llZ: 0.01, // ll for left leg
  llX: 0.02,
  llY: 0.01,
  rlZ: 0.01, // rl for right leg
  rlX: 0.02,
  rlY: 0.01,
  posY: 0.01
};
var pose1 = {
  lsZ: -0.195, // ls for left shoulder
  lsX: -1.166,
  lsY: 0.561,
  rsZ: 0.195, // rs for right shoulder
  rsX: 1.166,
  rsY: -0.561,
  llZ: -0.301, // ll for left leg
  llX: 0.897,
  llY: 0.091,
  rlZ: 0.301, // rl for right leg
  rlX: -0.897,
  rlY: 0.091,
  posY: 3
};
var pose2 = {
  lsZ: 0.195, // ls for left shoulder
  lsX: 1.166,
  lsY: 0.561,
  rsZ: -0.195, // rs for right shoulder
  rsX: -1.166,
  rsY: -0.561,
  llZ: -0.301, // ll for left leg
  llX: -0.897,
  llY: 0.091,
  rlZ: 0.301, // rl for right leg
  rlX: 0.897,
  rlY: 0.091,
  posY: -3
};
var pose3 = {
  lsZ: 0.01, // ls for left shoulder
  lsX: -3,
  lsY: 0.01,
  rsZ: 0.01, // rs for right shoulder
  rsX: -3,
  rsY: 0.01,
  llZ: 0.01, // ll for left leg
  llX: 0.02,
  llY: 0.01,
  rlZ: 0.01, // rl for right leg
  rlX: 0.02,
  rlY: 0.01,
  posY: 20
};
var pose4 = {
  lsZ: 0.01, // ls for left shoulder
  lsX: -1.632,
  lsY: -0.744,
  rsZ: 0.01, // rs for right shoulder
  rsX: -1.632,
  rsY: 0.744,
  llZ: -1.577, // ll for left leg
  llX: -0.402,
  llY: 1.581,
  rlZ: 1.577, // rl for right leg
  rlX: -0.402,
  rlY: -1.581,
  posY: -34.706
};
var keys = [
  [0, pose1],
  [0.1, pose2],
  [0.2, pose1],
  [0.3, pose2],
  [0.4, pose3],
  [0.5, pose1],
  [0.6, pose2],
  [0.7, pose1],
  [0.8, pose2],
  [0.9, pose4],
  [0.95, gcontrols],
  [1, pose1]
];
var T = 5;
var clock = new...