Examples: Added WebAudio timing example

TimeoutY · Oct 13, 2017 · 3532dd1 · 3532dd1
1 parent e8ddb44
commit 3532dd1
Show file tree

Hide file tree

Showing 2 changed files with 222 additions and 0 deletions.
diff --git a/examples/sounds/ping_pong.mp3 b/examples/sounds/ping_pong.mp3
diff --git a/examples/webaudio_timing.html b/examples/webaudio_timing.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webaudio - timing</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background:#777;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px;
+				width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+			}
+
+			a {
+				color: #ffffff;
+			}
+		</style>
+
+		<script src="../build/three.js"></script>
+		<script src="js/Detector.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+
+	</head>
+<body>
+
+	<div id="container"></div>
+	<div id="info">
+		<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio timing | sound effect by <a href="https://freesound.org/people/michorvath/sounds/269718/" target="_blank" rel="noopener noreferrer">michorvath</a>
+	</div>
+
+	<script>
+
+	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+	var scene, camera, renderer, audio;
+
+	var objects = [];
+
+	init();
+
+	function init() {
+
+		var container = document.getElementById( 'container' );
+
+		scene = new THREE.Scene();
+
+		//
+
+		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+		camera.position.set( 7, 3, 7 );
+
+		// lights
+
+		var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+		scene.add( ambientLight );
+
+		var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
+		directionalLight.position.set( 0, 5, 5 );
+		scene.add( directionalLight );
+
+		var d = 5;
+		directionalLight.castShadow = true;
+		directionalLight.shadow.camera.left = - d;
+		directionalLight.shadow.camera.right = d;
+		directionalLight.shadow.camera.top = d;
+		directionalLight.shadow.camera.bottom = - d;
+
+		directionalLight.shadow.camera.near = 1;
+		directionalLight.shadow.camera.far = 20;
+
+		directionalLight.shadow.mapSize.x = 1024;
+		directionalLight.shadow.mapSize.y = 1024;
+
+		// audio
+
+		var audioLoader = new THREE.AudioLoader();
+
+		var listener = new THREE.AudioListener();
+		camera.add( listener );
+
+		// floor
+
+		var floorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
+		var floorMaterial = new THREE.MeshLambertMaterial( { color: 0x4676b6 } );
+
+		var floor = new THREE.Mesh( floorGeometry, floorMaterial );
+		floor.rotation.x = Math.PI * - 0.5;
+		floor.receiveShadow = true;
+		scene.add( floor );
+
+		// objects
+
+		var count = 5;
+		var radius = 3;
+
+		var ballGeometry = new THREE.SphereBufferGeometry( 0.3, 32, 16 );
+		ballGeometry.translate( 0, 0.3, 0 );
+		var ballMaterial = new THREE.MeshLambertMaterial( { color: 0xcccccc } );
+
+		// create objects when audio buffer is loaded
+
+		audioLoader.load( 'sounds/ping_pong.mp3', function ( buffer ) {
+
+			for ( var i = 0; i < count; i ++ ) {
+
+				var s = i / count * Math.PI * 2;
+
+				var ball = new THREE.Mesh( ballGeometry, ballMaterial );
+				ball.castShadow = true;
+				ball.userData.down = false;
+
+				ball.position.x = radius * Math.cos( s );
+				ball.position.z = radius * Math.sin( s );
+
+				var audio = new THREE.PositionalAudio( listener );
+				audio.setBuffer( buffer );
+				ball.add( audio );
+
+				scene.add( ball );
+				objects.push( ball );
+
+			}
+
+			animate();
+
+		} );
+
+		//
+
+		renderer = new THREE.WebGLRenderer( { antialias: true } );
+		renderer.shadowMap.enabled = true;
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		renderer.setClearColor( 0x000000 );
+		renderer.setPixelRatio( window.devicePixelRatio );
+		container.appendChild( renderer.domElement );
+
+		//
+
+		var controls = new THREE.OrbitControls( camera, renderer.domElement );
+		controls.minDistance = 1;
+		controls.maxDistance = 25;
+
+		//
+
+		window.addEventListener( 'resize', onWindowResize, false );
+
+	}
+
+	function onWindowResize( event ) {
+
+		camera.aspect = window.innerWidth / window.innerHeight;
+		camera.updateProjectionMatrix();
+
+		renderer.setSize( window.innerWidth, window.innerHeight );
+
+	}
+
+	function animate() {
+
+		requestAnimationFrame( animate );
+
+		render();
+
+	}
+
+	var speed = 1.7;
+	var height = 3;
+	var offset = 0.5;
+	var time = 0;
+
+	function render() {
+
+		time += 0.02;
+
+		for ( var i = 0; i < objects.length; i ++ ) {
+
+			var ball = objects[ i ];
+
+			var previousHeight = ball.position.y;
+			ball.position.y = Math.abs( Math.sin( i * offset + ( time * speed ) ) * height );
+
+			if ( ball.position.y < previousHeight ) {
+
+				ball.userData.down = true;
+
+			} else {
+
+				if ( ball.userData.down === true ) {
+
+					// ball changed direction from down to up
+
+					var audio = ball.children[ 0 ];
+					audio.play(); // play audio with perfect timing when ball hits the surface
+					ball.userData.down = false;
+
+				}
+
+			}
+
+		}
+
+		renderer.render( scene, camera );
+
+	}
+
+	</script>
+
+</body>
+</html>