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/r70/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 theta1 = 0.5,theta2 = 0.5;
var turn = false;
var period = 1;

init();
animate();

var pose1 = {
	connectA : 1.0 , connectB : 0.5
};
var pose2 = {
	connectA : 0.5 , connectB : 0.5
};
var pose3 = {
	connectA : -0.3 , 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},
           ]; 

$("#shoot").click(function() {
	clock.start();
   if(turn === false){
     turn = !turn;
   }
});


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(20, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(-10, 35, -300);
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  //光線
  light = new THREE.PointLight(0xffffff);
  light.position.set(0, 500, -500);
  scene.add(light);
  //////////////////////////////////////////////////////////////////////////  

  //  1 單位 = 10公分

  //內野
  infield = new THREE.Mesh(new THREE.BoxGeometry(274.3, 0.1, 274.3), new THREE.MeshBasicMaterial({
    color: 0x00ff00
  }));
  infield.position.set(0, -193.9, 0);

  //球
  baseball = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshLambertMaterial({
    color: 0x000000
  }));
  //baseball.position.set(-10,0,-193.9);
  scene.add(baseball);

  geometry = new THREE.BoxGeometry(3.8, 1, 3.8);
  material = new THREE.MeshLambertMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide
  });

  //一壘
  base1 =...