audioNode

buttons

by jmcjc5u

HTML

<div id = "info"> 
     webgl tutorial 20 <br/>
	 Sounds <br/><br/>
	 with BGM (<a href="javascript:toggle();">dimmer</a>)
  </div>
  
<audio id="collisionsound" style="display:none">
<source src="https://github.com/jyunming-chen/tutsplus/blob/master/sounds/collision3.wav" type='audio/wav'>
</audio>

<audio id="soundtrack" autoplay loop style="display:none">
<source src="https://github.com/jyunming-chen/tutsplus/blob/master/sounds/KennyG.mp3" type='audio/mp3'>
</audio>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

#info {
		position: absolute;
		top: 0px; width: 100%;
		font-family: Monospace;
		font-size: 20px;
		padding: 5px;
		text-align: center;
		color: #003333
	}
	a {color: purple}

JavaScript

var scene, renderer, camera;
var controls;
var clock = new THREE.Clock();

var collisionSound, soundTrack;
var isPaused = false, soundVal = 1.0, sign = 1.0;

var cube;
var puck = {
	pos: new THREE.Vector3(),
	vel: new THREE.Vector3(),
	mesh: new THREE.Object3D()
};

init();
animate();

function toggle() {
	isPaused = !isPaused;
	sign = isPaused ? -1 : 1;
	console.log (isPaused);
}

function init()
{
	collisionSound = document.getElementById ('collisionsound');
	soundTrack = document.getElementById ('soundtrack');
	
	renderer = new THREE.WebGLRenderer( {antialias:true} );
	var width = window.innerWidth;
	var height = window.innerHeight;
	renderer.setSize (width, height);
	renderer.setClearColor (0xeeeeee);
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();
	
	//debugger;
	puck.mesh = new THREE.Mesh (new THREE.CylinderGeometry (6,6,4,20,20), new THREE.MeshLambertMaterial ({color:0xff0000}));
	puck.pos = new THREE.Vector3 (0,2,0);
	puck.vel = new THREE.Vector3 (30,0,40);
	scene.add (puck.mesh);
	
	var cubeGeometry = new THREE.BoxGeometry (100,6,100);
	var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0x888888});
	cube = new THREE.Mesh (cubeGeometry, cubeMaterial);
	cube.position.set (0,-2.5,0);
	scene.add (cube);
	
	var cubeGeometry = new THREE.BoxGeometry (5,20,110);
	var wallMaterial = new THREE.MeshLambertMaterial ({color: 0xee0000,opacity:0.2,transparent:true});
	var side1 = new THREE.Mesh (cubeGeometry, wallMaterial);
	side1.position.set (-52.5,5,0);
	scene.add (side1);
	var side2 = side1.clone();
	side2.position.set (52.5, 5,0);
	scene.add (side2);
	
	var cubeGeometry = new THREE.BoxGeometry (100,20,5);
	var side3 = new THREE.Mesh (cubeGeometry, wallMaterial);
	side3.position.set (0,5,52.5);
	scene.add (side3);
	var side4 = side3.clone();
	side4.position.set (0,5,-52.5);
	scene.add (side4);

	camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
	camera.position.y = 80;
	camera.position.z = 200;
	camera.lookAt...