Badminton Demo v4

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.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/three.js/r74/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.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>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>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');
	var robot, xMin, xMax, zMin, zMax;
	if ($this.closest('table').parent().hasClass('left')) {
		robot = robot2;
		xMin = -670;
		xMax = 0;
		zMin = -259;
		zMax = 259;
	} else {
		robot = robot1;
		xMin = 0;
		xMax = 670;
		zMin = -259;
		zMax = 259;
	}
	var row = $this.index();
	var col = $this.parent().index();
	var rowDelta = (xMax - xMin) / 3;
	var colDelta = (zMax - zMin) / 3;
	
	var xMinSub = xMin + row * rowDelta;
	var xMaxSub = xMin + (row + 1) * rowDelta;
	var zMinSub = zMin + col * colDelta;
	var zMaxSub = zMin + (col + 1) * colDelta;
	
	var position = new THREE.Vector3((xMinSub + xMaxSub) / 2, 0, (zMinSub + zMaxSub) / 2);
	robot.targetPosition = position;
	ball.position.copy(position);
});

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 =...