player play

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>
    <button id="serve" style="width:15%">serve</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/ball.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){
	
	// spotlight
 		var light = new THREE.PointLight();
    light.position.set(100, 50, 0);
    //scene.add(light);
    var light2 = new THREE.PointLight();
    light2.position.set(-100, 50, 0);
    //scene.add(light2);
    var light3 = new THREE.PointLight();
    light3.position.set(10, 50, 0);
    scene.add(light3);
    var light4 = new THREE.PointLight();
    light4.position.set(0, 50, 10);
    scene.add(light4);
	
  	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);
  
  texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/r7rjUNg.jpg');
  this.ground = new THREE.Mesh(new THREE.PlaneBufferGeometry(100,100,32), new THREE.MeshBasicMaterial({map: texture, 
                         transparent: true, 
                         side:THREE.DoubleSide}));
  this.ground.position.y -= 0.02;
	this.ground.rotation.x=-Math.PI/2;
	scene.add(this.ground);
  
  var geometry1 = new THREE.PlaneGeometry( 100, 100, 32 );
	var material1 = new THREE.MeshLambertMaterial ({map: THREE.ImageUtils.loadTexture('http://i.imgur.com/m1SdWVf.jpg'),  side:THREE.DoubleSide});
	cloud = new THREE.Mesh( geometry1, material1 );
  cloud.position.set(0, 35, -50);
  scene.add(cloud);
  var cloud2 = cloud.clone();
  cloud2.position.set(50, 35, 0);
  cloud2.rotation.y = Math.PI/2;
  scene.add(cloud2);
  var cloud3 = cloud.clone();
  cloud3.position.set(-50, 35, 0);
  cloud3.rotation.y = Math.PI/2;
  scene.add(cloud3);
  var cloud4 = cloud.clone();
  cloud4.position.set(0, 35, 50);
  scene.add(cloud4);

  
  
  
	this.line1 = new THREE.Mesh(new THREE.PlaneBufferGeometry(16,0.125,32), new THREE.MeshBasicMaterial({side:...