Badminton Demo

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<div class='top'>
  <a href='javascript:toggle()'>Toggle</a>
  <a href='javascript:reset()'>Reset</a>
</div>
<div class='left'>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td class='active'>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
</div>
<div class='right'>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td class='active'>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
</div>

CSS

body {
  margin: 0;
  overflow: hidden;
}
.top {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  text-align: center;
}
.left, .right {
  position: absolute;
  top: 0;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
td {
  text-align: center;
  width: 1em;
  cursor: pointer;
}
td.active {
  background: red;
}

JavaScript

var camera, scene, renderer;
var controls;
var badminton, badmintonCourt;
var clock;
var animated = false;
var robot1, robot2;

$(document).on('click', 'table td', function (event) {
	var $this = $(event.target);
	$this.closest('table').find('td').toggleClass('active', false);
	$this.addClass('active');
});

initBadminton();
init();
animate();

function init() {

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000);
	camera.position.set(0, 200, 600);
	scene.add(camera);
	
	badmintonCourt = createBadmintonCourt();
	scene.add(badmintonCourt);
	
	badminton = new THREE.Badminton(2.5, 5, 6.5);
	badminton.unit.meter = 100;
	scene.add(badminton);
	
	reset();
	
	clock = new THREE.Clock();
	
	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);
	window.addEventListener('resize', onWindowResize, false);
  
  robot1 = new THREE.BadmintonRobot(-670, 0, -259, 259);
	robot1.badminton = badminton;
	robot1.rotation.y = Math.PI / 2;
	scene.add(robot1);
	/*
	robot2 = new THREE.BadmintonRobot(0, 670, -259, 259);
	robot2.badminton = badminton;
	robot2.rotation.y = -Math.PI / 2;
	scene.add(robot2);
	*/
	ball = new THREE.Mesh(
		new THREE.BoxGeometry(10, 10, 10),
		new THREE.MeshNormalMaterial());
	scene.add(ball);
	
	(badminton.afterImpact = function () {
		var fallingPosition = badminton.getFallingPosition(0);
		var $active, robot, xMin, xMax, zMin, zMax, yMin = 155;
		if (fallingPosition.x < 0) {
			$active = $('.right td.active');
			robot = robot1;
			xMin = 0;
			xMax = 670;
			zMin = -259;
			zMax = 259;
		/*} else {
			$active = $('.left td.active');
			robot = robot2;
			xMin = -670;
			xMax = 0;
			zMin = -259;
			zMax = 259;
		}*/
		var row = $active.index();
		var col = $active.parent().index();
		var rowDelta =...