baseball game

by Alvin Chen

HTML

<div id="info">
  <br/>
  <br/>
</div>
<p id="countPoint">
  <p>  
<p id="chooseball">
  <button id="fastball" style="width:15%" >Fastball</button><br/>
  <button id="changeup" style="width:15%">Changeup</button><br/>
 
  <button id="rightSlider" style="width:15%">RightSlider</button><br/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/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://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<script src="https://rawgit.com/jyunming-chen/game3js/master/js/ccdbox.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:25px;
  margin-top:30px;
  margin-left:428px;
  width: 100%;
  color: #ffff00
}
#chooseball {
  position: absolute;
  font-size:25px;
  margin-top:250px;
  margin-left:500px;
  width: 100%;

}

JavaScript

var scene, renderer, camera;
var controls;
var keyboard = new KeyboardState();
var clock = new THREE.Clock();
var clock2 = new THREE.Clock();
var turn = false, turn2 = true ;
var period = 1;
var long = 0 , v0 = 0;
var pos, vel, force;
var ball;
var v0;
var upangle;
var dt = 0;
var vel2 =new THREE.Vector3(0,0,0);
var getPoint = new THREE.Vector3(0,0,0);
var getPoint2 = new THREE.Vector3(0,0,0);
var isCheck = false;
var isFirst = true;
var release = false;
var angle2 =0;
var sign=1;
var speed =0;
var zero = 0; 
var isfirst = true;
var countball1=0;
var countball2=0;
var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];
var fastball=false;
var changeup=false;
var leftSlider=false;
var rightSlider=false;
var sinker=false;

var batR = 0.5, batH  = 10;
var ballr = 0.7;
var keys = [
[0, [-0.419, 0.783, -0.315, -1.67, 0,1.144,-1.414,0.439,-1.471,0.057]],// default
[0.15, [-0.419, 0.783, -0.31, -1.67, 0,1.144,-1.414,0.439,-1.471,0.655]],  // standby
[0.25, [-0.419, 0.783, -0.31, -1.67, 0,1.144,-1.414,0.439,-1.471,0.057]],  // standbyFin
[0.5, [-0.419, -0.59, -0.178, -1.67, -0.009,1.144,-1.414,0.439,-1.47,0.057]], // firstMove
[0.7, [-1.37, -1.48, -0.178, -1.67, -0.142,1.284,-0.933,0.714,-0.939,0.057]], // secondMove
[0.8, [-1.303, -1.48, 0.851, -2.069, -0.408,1.348,-0.453,0.645,-1.272,0.057]], // thirdMove
[0.85, [-1.303, -1.483, 0.371, -2.01,-0.350,1.348,-0.453,0.645,-1.272,0.057]], // swing
[0.9, [-1.439, -1.620, 0.027, -2.01, -0.275,1.348,-0.453,0.645,-1.272,0.057]], // swingMove1
[1, [-1.37, -1.55, -1.48, 0.322, -0.0093,1.484,-1.139,0.988,-0.607,0.057]],];

var T = 3;
var ts = clock.getElapsedTime();
var intKey=[];
var throwturn = true;
var throwturn1 = true;
gcontrols = {
    v0: 1106,//左右
    upangle: 35,//上下
    x: 1,
    y:-1,
    z:-2,
    turnAngle:35,
    S:0.1
}
var gui = new dat.GUI({load: loadALVIN(), preset: 'fastball'});
gui.remember (gcontrols);
gui.add(gcontrols, 'v0', 0, 2500 );
gui.add(gcontrols, 'upangle',-2500, 1800);
gui.add(gcontrols,...