debug

by Alan Lin

HTML

<div id="info">baseball bat
  <br/>collision detection</div>
<script src="http://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="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh, light, controls;
var keyboard = new KeyboardState();
var r = 5; // cm
var R = 7;
var h = 80;
var bat, ball0, ball1, ballC;
var p0 = new THREE.Vector3 (45,80,20);
var p1 = new THREE.Vector3 (-40, 30, -40);
var b = new THREE.Vector3 (0,0,0);
var d = new THREE.Vector3 (0,1,0);
var pt;

init();
animate();

function makeBat(r, h) {
  var bat = new THREE.Mesh(new THREE.CylinderGeometry(r, r, h,20), new THREE.MeshNormalMaterial());
  var group = new THREE.Object3D();
  group.add(bat);
  bat.position.set(0, h / 2, 0);
  return group;
}

function makeBall (R, end) {
  var ball = new THREE.Mesh(new THREE.SphereGeometry(R,20,20), new THREE.MeshNormalMaterial());
	if (end === 0)
  	ball.material = new THREE.MeshLambertMaterial ({color:0xff0000});
	if (end === 1)
  	ball.material = new THREE.MeshLambertMaterial ({color:0x00ff00});
	return ball;
}

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;
  scene.add(camera);

  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  var gridXZ = new THREE.GridHelper(100, 10);
  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  /////////////////////////////////////////////////////////////
  bat = makeBat (r, h);
  scene.add (bat);
	ball0 = makeBall (R, 0); scene.add (ball0);
	ball1 = makeBall (R, 1); scene.add (ball1);
	ballC = makeBall (R); scene.add (ballC);
  
	// positioning ...
  bat.position.copy (b);
  // rotate (0,1,0) to d
  var YY = new THREE.Vector3(0,1,0);
  var angle  = YY.angleTo (d);
  if (angle != 0) {
  	var...