player with shadow

by YouTingKuo

HTML

<div id="info"></div>
<button id='pass' class='pass'></button>
<button id='spike' class='spike' ></button>
<button id='start' class='start'></button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://youtingkuo.github.io/volleyball/ball.js"></script>
<script src="https://youtingkuo.github.io/volleyball/agent.js"></script>
<audio id="soundtrack" autoplay loop style="display:none">
</audio>
<audio id="slapSound" style="display:none">
<source src="https://youtingkuo.github.io/sound/slap.mp3" type='audio/mp3'>
</audio>
<audio id="spikeSound" style="display:none">
<source src="https://youtingkuo.github.io/sound/spike.mp3" type='audio/mp3'>
</audio>

CSS

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

body {
  overflow: hidden;
}

.pass {
  position: absolute;
  border-radius: 50px;
  left : 6%;
  top: 77%;
  width: 80px;
  height: 80px;
  background-image: url(https://i.imgur.com/uewilpE.png);
  background-size: cover;
  transition: all 0.5s;
}

.pass.btn-active {
  background-image: url(https://i.imgur.com/OVO20Sn.png);
}

.spike {
  position: absolute;
  border-radius: 50px;
  left : 13%;
  top: 77%;
  width: 80px;
  height: 80px;
  background-image: url(https://i.imgur.com/fDoF6E1.png);
  background-size: cover;
  transition: all 0.5s;
}

.spike.btn-active {
  background-image: url(https://i.imgur.com/ehUlaMl.png);
}

.start {
  position: absolute;
  border-radius: 50px;
  left : 20%;
  top: 77%;
  width: 80px;
  height: 80px;
  background-image: url(https://i.imgur.com/4jtk3xp.png);
  background-size: cover;
  transition: all 0.5s;
}

.start.btn-active {
  background-color:#ffff00;
}

JavaScript

var BasicScene = function (scene){
    var spotLight = new THREE.SpotLight( 0xffffff );
		spotLight.position.set( 20, 10, 8 );
		spotLight.castShadow = true;
		spotLight.shadow.mapSize.width = 1024;
		spotLight.shadow.mapSize.height = 1024;
		spotLight.shadow.camera.near = 500;
		spotLight.shadow.camera.far = 4000;
		spotLight.shadow.camera.fov = 30;
		scene.add( spotLight );
    
    spotLight.castShadow = true;
  	spotLight.shadowMapWidth = 1024;
  	spotLight.shadowMapHeight = 1024;
  	spotLight.shadowCameraNear = 10;
  	spotLight.shadowCameraFar = 4000;
  	spotLight.shadowCameraFov = spotLight.angle / Math.PI * 180;
  
    var spotLight2 = new THREE.SpotLight( 0xffffff );
		spotLight2.position.set( 13, 8, -10 );
    spotLight2.castShadow = true;
		spotLight2.shadow.mapSize.width = 1024;
		spotLight2.shadow.mapSize.height = 1024;
		spotLight2.shadow.camera.near = 500;
		spotLight2.shadow.camera.far = 4000;
		spotLight2.shadow.camera.fov = 30;
		//scene.add( spotLight2 );
    
    var spotLight3 = spotLight2.clone();
		spotLight3.position.set( -1000, 1000, -1000 );
		//scene.add( spotLight3 );
    
    var spotLight4 = spotLight2.clone();
		spotLight4.position.set( -1000, 1000, 1000 );
		scene.add( spotLight4 );
    
    /*
    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('https://i.imgur.com/fJxaqVc.jpg'),  side:THREE.DoubleSide});
		var cylinder = new THREE.Mesh( geometry, material );
    cylinder.position.y =...