Keyframe Animation

by 蔡 育曄

HTML

<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://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

var renderer, camera, controls, scene, axes, stats;
var loader = new THREE.TextureLoader();
var head, body, helfBody;
var LUpperArm, RUpperArm, LFoream, Rfoream;
var leftLeg, rightLeg, Lknee, RKnee;
var skirt, skirt2, skirt3, skirt4;
var gcontrols;
var clock = new THREE.Clock();
var ts = clock.getElapsedTime();



var pos1 = {
  UpDn: -0.2,
  LR: 0,
  LtRt: 0,
  x: 0,
  y: 0,
  z : 0,
  waistX: -0.24837377816842354,
  waistY: 0,
  waistZ: 0,
  leftUpArmLR: 0.1,
  leftUpArmFB: 1.5707963267948966,
  leftUpArmRotate: 0,
  LFoream: -0.09831010923144157,
  rightUpArmLR: -0.5646335018083386,
  rightUpArmFB: 1.3488839921244522,
  rightUpArmRotate: -1.5707963267948966,
  RFoream: 0,
  left_FB: -0.47794244964536975,
  left_LR: 0.5,
  left_Rotate: 0.6871383972962852,
  Lknee: 0.294497243512691,
  right_FB: -0.47794244964536975,
  right_LR: -0.5,
  right_Rotate: -0.7853981633974483,
  RKnee: 0.1732336726545241,
  Position_x: 0,
  Position_y: 56,
  Position_z: 0
};
var pos2 = {
  UpDn: 0.2,
  LR: 0,
  LtRt: 0,
  x: 0,
  y: 0,
  z : 0,
  waistX: -0.24837377816842354,
  waistY: 0,
  waistZ: 0,
  leftUpArmLR: 0.1,
  leftUpArmFB: 1.5707963267948966,
  leftUpArmRotate: 0,
  LFoream: -0.09831010923144157,
  rightUpArmLR: -0.5646335018083386,
  rightUpArmFB: 0.06002546757479277,
  rightUpArmRotate: -1.5707963267948966,
  RFoream: 0,
  left_FB: -0.47794244964536975,
  left_LR: 0.5,
  left_Rotate: 0.6871383972962852,
  Lknee: 0.294497243512691,
  right_FB: -0.47794244964536975,
  right_LR: -0.5,
  right_Rotate: -0.7853981633974483,
  RKnee: 0.1732336726545241,
  Position_x: 0,
  Position_y: 56,
  Position_z: 0
};
var pos3 = {
  UpDn: -0.2,
  LR: 0,
  LtRt: -0.7469258519287558,
  x: 0,
  y: 0,
  z: 0,
  waistX: 0,
  waistY: 0,
  waistZ: -0.09246347277935185,
  leftUpArmLR: 0.1,
  leftUpArmFB: 1.5707963267948966,
  leftUpArmRotate: 0,
  LFoream: -0.09831010923144157,
  rightUpArmLR: -0.1965119474174748,
  rightUpArmFB: 0.6200907606029532,
  rightUpArmRotate: 0,
  RFoream:...