two robot

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="serve1" style="width:15%">serve1</button>
    <button id="serve2" style="width:15%">serve2</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>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var Ball = function (scene){
	THREE.ImageUtils.crossOrigin = '';
  	var texture = THREE.ImageUtils.loadTexture('https://i.imgur.com/vSpU7ik.png');
  
	this.mesh = new THREE.Mesh(new THREE.SphereGeometry(0.2, 32, 32), new THREE.MeshBasicMaterial({map: texture, 
                         transparent: true, 
                         side:THREE.DoubleSide}));
  	this.mesh.position.set(0, 0.2, 0);
 	scene.add(this.mesh);
	this.v = new THREE.Vector3(0, 0, 0);

};


var BasicScene = function (scene){
	
    var light1 = new THREE.PointLight();
    light1.position.set(0, 10, -30);
    scene.add(light1);
    var light2 = new THREE.PointLight();
    light2.position.set(0, 10, 30);
    scene.add(light2);
    var light3 = new THREE.PointLight();
    light3.position.set(-30, 10, 0);
    scene.add(light3);
    var light4 = new THREE.PointLight();
    light4.position.set(30, 10, 0);
    scene.add(light4);

    THREE.ImageUtils.crossOrigin = '';
    var geometry = new THREE.CylinderGeometry( 50, 50, 50, 32, 32 );
		var material = new THREE.MeshBasicMaterial ({map: THREE.ImageUtils.loadTexture('http://i.imgur.com/fJxaqVc.jpg'),  side:THREE.DoubleSide});
		var cylinder = new THREE.Mesh( geometry, material );
    cylinder.position.y = 12.5;
		scene.add( cylinder );
	
  	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 -=...