player HUD

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>
<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/OVO20Sn.png);
  background-size: cover;
  transition: all 0.5s;
}

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

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

.spike.btn-active {
  background-image: url(https://i.imgur.com/fDoF6E1.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 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 = 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('https://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);

	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...