baseball

DEMO

by Alvin Chen

HTML

<div id="info">Baseball demo
  <br/>
  <button id="shoot" style="width:15%">start</button>
  <br/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/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;
  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 danboard_color;		//阿楞的顏色材質;
var head, torso, handleft, handright, footleft, footright, 
overall, shoulderleft, shoulderright; 
var v0;
var upangle;
	gcontrols = {
    v0: 0,//左右
    upangle: 0//上下
  }
  var gui = new dat.GUI();
  gui.add(gcontrols, 'v0', 0, 1000 );
  gui.add(gcontrols, 'upangle', 0, 25);
$('#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;
 	pos = new THREE.Vector3 (0, 21, -184);  // xr = 2.0, lr = 2.0
  force = new THREE.Vector3(0, -98, 0);
  vel = new THREE.Vector3 (0,0,v0).applyAxisAngle (new THREE.Vector3(1,0,0), -Math.PI/upangle);
   // 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},
            {s: 0.5,pose: pose4},
            {s: 0.6,pose: pose5},
            {s: 1,pose: pose6},
           ]; 

function init() {
  //主頁面
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);
  //主視角
  camera = new THREE.PerspectiveCamera(5, window.innerWidth / window.innerHeight, 1,...