hit demo

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;
  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 = 10;
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 batR = 0.5, batH  = 8;
var ballr = 0.7;
var hitturn  = false , hitting;



$('#shoot').click(function() {
	if(hitturn) hitturn = !hitturn;
	turn = !turn;
  turn2 =true;
  if(turn) {
  	clock.start();
    $(this).text("reset");
  }
  else {
  	baseball.position.set(0,5,0);
  	$(this).text("start");
  	clock = new THREE.Clock();
    clock2 = new THREE.Clock();
  }	
  
  // add AxisHelper in init
  // 2D ball state variables: pos, vel, force
  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,400).applyAxisAngle (new THREE.Vector3(1,0,0), -Math.PI/8);
   // vr = 41.6
  
});

init();
animate();

function init() {
  //主頁面
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xaaaaaa);
  document.body.appendChild(renderer.domElement);
  //主視角
  camera = new THREE.PerspectiveCamera(5, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0,100, -450);
  
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  var gridXZ = new THREE.GridHelper(100, 5);
	gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
	scene.add(gridXZ);
  //光線
	light = new THREE.PointLight(0xffffff);
  light.position.set(0, 500, -500);
  scene.add(light);
  //////////////////////////////////////////////////////////////////////////  

  //  1 單位 = 10公分 = 0.1公尺
  //	1公尺 = 10單位
  
	//打擊者
  document.body.appendChild(renderer.domElement);
	window.addEventListener('resize', onWindowResize,...