baseball field

by Alan Lin

HTML

<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>

CSS

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

body {
  overflow: hidden;
}

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;
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, 'turnAngle',-1800, 1800);
  gui.add(gcontrols, 'x', -3, 3);
  gui.add(gcontrols, 'y', -3, 3);
  gui.add(gcontrols, 'z', -3, 3);
  gui.add(gcontrols, 'S', 0.001, 1.0);
  */


$('#shoot').click(function() {
  turn = !turn;
  turn2 = true;
  if (turn) {
    clock.start();
    $(this).text("reset");
  } else {
    $(this).text("start");
    clock = new THREE.Clock();
    clock2 = new THREE.Clock();
  }
  // add AxisHelper in init
  // 2D ball state variables: pos, vel, force
  v0 = gcontrols.v0;
  upangle = gcontrols.upangle;
  x = gcontrols.x;
  y = gcontrols.y;
  z = gcontrols.z;
  turnAngle = gcontrols.turnAngle;
  omega0 = new THREE.Vector3(x, y, z).normalize();
  nowOmega = omega0.clone();
  pos = new THREE.Vector3(0, 21, -184);
  gravity = new THREE.Vector3(0, -98, 0);
  vel = new THREE.Vector3(0, 0, v0).applyAxisAngle(new THREE.Vector3(1, 0, 0), -Math.PI / upangle);
  vel = vel.applyAxisAngle(new THREE.Vector3(0, 1, 0), -Math.PI / turnAngle);

  // vr = 41.6
});

init();
animate();

var pose1 = {
  connectA: 1.0,
  connectB: 0.5
};
var pose2 = {
  connectA: 0.5,
  connectB: 0.5
};
var pose3 = {
  connectA: 0,
  connectB: 0
};
var pose4 = {
  connectA: -0.55,
  connectB: -0.65
};
var pose5 = {
  connectA: -1.0,
  connectB: -1.0
};
var pose6 = {
  connectA: -0.5,
  connectB: 0
};


var keys = [{
  s: 0,
  pose: pose1
}, {
  s: 0.3,
  pose: pose2
}, {
  s: 0.4,
  pose: pose3
}, {
 ...