Badminton Demo v5

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'>
  <div id='score'>[0:0]</div>
  <a href='javascript:toggle()'>Start</a>
  <a href='javascript:next()'>Next</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

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(factory((global.THREE = global.THREE || {}, global.THREE.Badminton = global.THREE.Badminton || {})));
}(this, (function (exports) { 'use strict';

if (THREE.Object3D.prototype.directionLocalToWorld === undefined) {
	THREE.Object3D.prototype.directionLocalToWorld = function (direction) {
		var origin = this.localToWorld(new THREE.Vector3(0, 0, 0));
		return this.localToWorld(direction).sub(origin);
	}
}

if (THREE.Object3D.prototype.directionWorldToLocal === undefined) {
	THREE.Object3D.prototype.directionWorldToLocal = function (direction) {
		var origin = this.localToWorld(new THREE.Vector3(0, 0, 0));
		return this.worldToLocal(direction.add(origin));
	}
}

if (THREE.Object3D.prototype.localToTarget === undefined) {
	THREE.Object3D.prototype.localToTarget = function (vector, target) {
		return target.worldToLocal(this.localToWorld(vector));
	}
}

function Shuttle(corkRadius, skirtRadius, skirtHeight, corkMass, skirtMass) {
	
	THREE.Object3D.call(this);
	
	corkMass = (corkMass !== undefined) ? corkMass : 0.005;
	skirtMass = (skirtMass !== undefined) ? skirtMass : 0.0001;
	
	this.parameters = {
		corkRadius: corkRadius,
		skirtRadius: skirtRadius, 
		skirtHeight: skirtHeight,
		corkMass: corkMass,
		skirtMass: skirtMass,
	};
	
	var flipFrame = new THREE.Object3D();
	this.add(flipFrame);
	
	var cork = new THREE.Mesh(
		new THREE.SphereGeometry(corkRadius, 8, 8, 0, Math.PI * 2, 0, Math.PI / 2),
		new THREE.MeshNormalMaterial({
			wireframe: true,
			side: THREE.DoubleSide,
		}));
	flipFrame.add(cork);
	
	var skirt = new THREE.Mesh(
		new THREE.CylinderGeometry(corkRadius, skirtRadius, skirtHeight, 16, 1, true),
		new THREE.MeshNormalMaterial({
			wireframe: true,
			side: THREE.DoubleSide,
		}));
	flipFrame.add(skirt);
	
	this.flipFrame = flipFrame;
	this.cork =...