player click

by YouTingKuo

HTML

<div id="info">Volley Ball
  <br/>
    <button id="left" style="width:15%">left</button>
    <button id="right" style="width:15%">right</button>
  <br/>
</div>
<script src="https://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="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://youtingkuo.github.io/volleyball/basicScene.js"></script>
<script src="https://youtingkuo.github.io/volleyball/ball.js"></script>
<script src="https://youtingkuo.github.io/volleyball/agent.js"></script>
<script src="https://youtingkuo.github.io/volleyball/robot.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var BasicScene = function (scene){
	
	var light = new THREE.PointLight(0xffffff);
  	light.position.set(100,500,500);
  	scene.add(light);
  	var light2 = new THREE.PointLight(0xffffff);
  	light.position.set(100,500,-500);
  	scene.add(light2);	
	
  THREE.ImageUtils.crossOrigin = '';
  	var texture = THREE.ImageUtils.loadTexture('https://i.imgur.com/uLAXfWL.jpg');
  
	this.floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(32,16,32), new THREE.MeshBasicMaterial({map: texture, 
                         transparent: true, 
                         side:THREE.DoubleSide}));
	this.floor.rotation.x=-Math.PI/2;
	scene.add(this.floor);
  
  this.line1 = new THREE.Mesh(new THREE.PlaneBufferGeometry(16,0.125,32), new THREE.MeshBasicMaterial({side: THREE.DoubleSide, color: 0xffffff}));
  this.line1.rotation.x=-Math.PI/2;
  this.line1.position.set(0, 0.05, 4.0625);
  scene.add(this.line1);
  this.line2 = this.line1.clone();
  this.line2.position.set(0, 0.05, -4.0625);
  scene.add(this.line2);
  this.line3 = new THREE.Mesh(new THREE.PlaneBufferGeometry(8.25,0.125,32), new THREE.MeshBasicMaterial({side: THREE.DoubleSide, color: 0xffffff}));
  this.line3.rotation.x=-Math.PI/2;
  this.line3.rotation.z=-Math.PI/2;
  this.line3.position.set(-8.0625, 0.05, 0);
  scene.add(this.line3);
  this.line4 = this.line3.clone();
  this.line4.position.set(8.0625, 0.05, 0);
  scene.add(this.line4);

	/*
	this.ballMachine = new THREE.Object3D();
	this.barrel = new THREE.Object3D();	
	var mesh = new THREE.Mesh(new THREE.CylinderGeometry(0.12, 0.12, 1, 32, 32, true), new THREE.MeshBasicMaterial({color:0xff0000, side:THREE.DoubleSide}));
	mesh.position.set(0, 0.5, 0.12);
	this.barrel.position.set(0, 0.05, 0);
	this.barrel.add(mesh);
	this.barrel.rotation.x = -Math.PI/6; 
	//barrel.rotation.z = -Math.PI/2; 
	this.ballMachine.add(this.barrel);
	scene.add(this.ballMachine);
	
	var mesh2 = new THREE.Mesh(new THREE.CylinderGeometry(0.25*Math.sqrt(2), 0.25*Math.sqrt(2), 0.1, 32), new...