JSFiddle - React, Tailwind, and code Playground

by Alvin Chen

HTML

<div id="info">
<br>
<br>


</div>
<p id="countPoint">
  <p>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/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;
}
#countPoint {
  position: absolute;
  font-size:20px;
  margin-top:20px;
  margin-left:70px;
  width: 100%;
  color: #ffff00
}

JavaScript

var scene, renderer, camera;
var controls;
var all;
var body;
var bodyToArmL,armToHandL;
var bodyToArm,armToHand;
var bodyToLeftLeg,bodyToRightLeg;;
var bodyToRightLid,bodyToLeftLid,bodyToBackwardLid, 	bodyToForwardLid;
var clock = new THREE.Clock();
var period = 2;
var turn = false;
var turn1 = false;
var angle = 0;


var pose1 = {
		bodyToHead: -0.024555197169909504,
    bodyToArmL: -0.0368327957548642,
    leftJoint: -0.04479242534595773,
    bodyToArm: -0.10186244927687027,
    rightJoint: -0.04479242534595773,
    bodyToLeftLeg: -0.0014393229979537403,
    bodyToRightLeg: -0.0014393229979537403,
    posi:0
};

var pose2 = {
    bodyToHead: -0.024555197169909504,
    bodyToArmL: -0.0368327957548642,
    leftJoint: -0.011514583983629922,
    bodyToArm: -1.5,
    rightJoint: 1.5491971005445144,
    bodyToLeftLeg: -0.5,
    bodyToRightLeg: -0.0014393229979537403,
    posi:20
};

var pose3 = {
  	bodyToHead: -0.024555197169909504,
    bodyToArmL: -0.0368327957548642,
    leftJoint: -0.04479242534595773,
    bodyToArm: -0.10186244927687027,
    rightJoint: -0.04479242534595773,
    bodyToLeftLeg: -0.0014393229979537403,
    bodyToRightLeg: -0.0014393229979537403,
    posi:0
};

var pose4 = {
    bodyToHead: -0.024555197169909504,
    bodyToArmL: 1.5,
    leftJoint: -1.3121076544237509,
    bodyToArm: -0.004317968993861276,
    rightJoint: -0.011514583983629922,
    bodyToLeftLeg: -0.023115874171955764,
    bodyToRightLeg: 0.5187979051780944,
    posi:-20
 
};

var pose5w ={
    bodyToHead: -0.024555197169909504,
    bodyToArmL: -0.6871293309749247,
    leftJoint: 0.7843356570596192,
    bodyToArm: 0.45088960566018077,
    rightJoint: 0.7843356570596192,
    bodyToLeftLeg: -0.06646897651995981,
    bodyToRightLeg: -0.5
};

var pose6w ={
     bodyToHead: -0.024555197169909504,
     bodyToArmL: 0.45088960566018077,
     leftJoint: 0.7843356570596192,
     bodyToArm: -1.1098220788679638,
     rightJoint: 0.7843356570596192,
     bodyToLeftLeg: -0.5,
    ...