Badminton Flip Angle

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>
<div class='top'>
  <a href='javascript:toggle()'>Toggle</a>
  <a href='javascript:reset()'>Reset</a>
</div>

CSS

body {
  margin: 0;
  overflow: hidden;
}
.top {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  text-align: center;
}

JavaScript

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

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);
}

function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
	var delta = clock.getDelta();
	if (animated) {
		badminton.update(delta / 5);
		if (badminton.position.y < 50)
			if (badminton.position.x < 0)
				impact1();
			else
				impact2();
	}
			
	controls.update();
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
}

function reset() {
	badminton.rotation.set(0, 0, Math.PI);
	badminton.position.set(-400, 200, 0);
	badminton.velocity = new THREE.Vector3(0, 0, 0);
}

function impact1() {
	badminton.impact(new THREE.Vector3(700, 500, 0));
}

function impact2() {
	badminton.impact(new THREE.Vector3(-500, 500, 0));
}

function toggle() {
	animated = !animated;
}

function createBadmintonCourt() {
	
	var material = new THREE.LineBasicMaterial();
	var geometry = new THREE.Geometry();
	geometry.vertices.push(
		new THREE.Vector3( -670,   0, -305), new THREE.Vector3( -670,   0,  305),
		new THREE.Vector3( -594,   0, -305), new THREE.Vector3( -594,   0, ...