Examples: Clean up web audio demos.

examples/webaudio_orientation.html

@@ -29,24 +29,24 @@
 		import { PositionalAudioHelper } from './jsm/helpers/PositionalAudioHelper.js';
 		import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-		var scene, camera, renderer;
+		let scene, camera, renderer;
 
-		var startButton = document.getElementById( 'startButton' );
+		const startButton = document.getElementById( 'startButton' );
 		startButton.addEventListener( 'click', init );
 
 		function init() {
 
-			var overlay = document.getElementById( 'overlay' );
+			const overlay = document.getElementById( 'overlay' );
 			overlay.remove();
 
-			var container = document.getElementById( 'container' );
+			const container = document.getElementById( 'container' );
 
 			//
 
 			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 			camera.position.set( 3, 2, 3 );
 
-			var reflectionCube = new THREE.CubeTextureLoader()
+			const reflectionCube = new THREE.CubeTextureLoader()
 				.setPath( 'textures/cube/SwedishRoyalCastle/' )
 				.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
@@ -56,11 +56,11 @@
 
 			//
 
-			var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+			const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 			hemiLight.position.set( 0, 20, 0 );
 			scene.add( hemiLight );
 
-			var dirLight = new THREE.DirectionalLight( 0xffffff );
+			const dirLight = new THREE.DirectionalLight( 0xffffff );
 			dirLight.position.set( 5, 5, 0 );
 			dirLight.castShadow = true;
 			dirLight.shadow.camera.top = 1;
@@ -75,36 +75,36 @@
 
 			//
 
-			var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 50, 50 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+			const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 50, 50 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 			mesh.rotation.x = - Math.PI / 2;
 			mesh.receiveShadow = true;
 			scene.add( mesh );
 
-			var grid = new THREE.GridHelper( 50, 50, 0x888888, 0x888888 );
+			const grid = new THREE.GridHelper( 50, 50, 0x888888, 0x888888 );
 			scene.add( grid );
 
 			//
 
-			var listener = new THREE.AudioListener();
+			const listener = new THREE.AudioListener();
 			camera.add( listener );
 
-			var audioElement = document.getElementById( 'music' );
+			const audioElement = document.getElementById( 'music' );
 			audioElement.play();
 
-			var positionalAudio = new THREE.PositionalAudio( listener );
+			const positionalAudio = new THREE.PositionalAudio( listener );
 			positionalAudio.setMediaElementSource( audioElement );
 			positionalAudio.setRefDistance( 1 );
 			positionalAudio.setDirectionalCone( 180, 230, 0.1 );
 
-			var helper = new PositionalAudioHelper( positionalAudio, 0.1 );
+			const helper = new PositionalAudioHelper( positionalAudio, 0.1 );
 			positionalAudio.add( helper );
 
 			//
 
-			var gltfLoader = new GLTFLoader();
+			const gltfLoader = new GLTFLoader();
 			gltfLoader.load( 'models/gltf/BoomBox/glTF-Binary/BoomBox.glb', function ( gltf ) {
 
-				var boomBox = gltf.scene;
+				const boomBox = gltf.scene;
 				boomBox.position.set( 0, 0.2, 0 );
 				boomBox.scale.set( 20, 20, 20 );
 
@@ -128,10 +128,10 @@
 
 			// sound is damped behind this wall
 
-			var wallGeometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );
-			var wallMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );
+			const wallGeometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );
+			const wallMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );
 
-			var wall = new THREE.Mesh( wallGeometry, wallMaterial );
+			const wall = new THREE.Mesh( wallGeometry, wallMaterial );
 			wall.position.set( 0, 0.5, - 0.5 );
 			scene.add( wall );
 
@@ -147,7 +147,7 @@
 
 			//
 
-			var controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.target.set( 0, 0.1, 0 );
 			controls.update();
 			controls.minDistance = 0.5;

examples/webaudio_sandbox.html

@@ -26,26 +26,26 @@
 
 			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
-			var camera, controls, scene, renderer, light;
+			let camera, controls, scene, renderer, light;
 
-			var material1, material2, material3;
+			let material1, material2, material3;
 
-			var analyser1, analyser2, analyser3;
+			let analyser1, analyser2, analyser3;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var startButton = document.getElementById( 'startButton' );
+			const startButton = document.getElementById( 'startButton' );
 			startButton.addEventListener( 'click', init );
 
 			function init() {
 
-				var overlay = document.getElementById( 'overlay' );
+				const overlay = document.getElementById( 'overlay' );
 				overlay.remove();
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 25, 0 );
 
-				var listener = new THREE.AudioListener();
+				const listener = new THREE.AudioListener();
 				camera.add( listener );
 
 				scene = new THREE.Scene();
@@ -55,7 +55,7 @@
 				light.position.set( 0, 0.5, 1 ).normalize();
 				scene.add( light );
 
-				var sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );
+				const sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );
 
 				material1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, flatShading: true, shininess: 0 } );
 				material2 = new THREE.MeshPhongMaterial( { color: 0xff2200, flatShading: true, shininess: 0 } );
@@ -63,13 +63,13 @@
 
 				// sound spheres
 
-				var audioLoader = new THREE.AudioLoader();
+				const audioLoader = new THREE.AudioLoader();
 
-				var mesh1 = new THREE.Mesh( sphere, material1 );
+				const mesh1 = new THREE.Mesh( sphere, material1 );
 				mesh1.position.set( - 250, 30, 0 );
 				scene.add( mesh1 );
 
-				var sound1 = new THREE.PositionalAudio( listener );
+				const sound1 = new THREE.PositionalAudio( listener );
 				audioLoader.load( 'sounds/358232_j_s_song.ogg', function ( buffer ) {
 
 					sound1.setBuffer( buffer );
@@ -81,11 +81,11 @@
 
 				//
 
-				var mesh2 = new THREE.Mesh( sphere, material2 );
+				const mesh2 = new THREE.Mesh( sphere, material2 );
 				mesh2.position.set( 250, 30, 0 );
 				scene.add( mesh2 );
 
-				var sound2 = new THREE.PositionalAudio( listener );
+				const sound2 = new THREE.PositionalAudio( listener );
 				audioLoader.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg', function ( buffer ) {
 
 					sound2.setBuffer( buffer );
@@ -97,12 +97,12 @@
 
 				//
 
-				var mesh3 = new THREE.Mesh( sphere, material3 );
+				const mesh3 = new THREE.Mesh( sphere, material3 );
 				mesh3.position.set( 0, 30, - 250 );
 				scene.add( mesh3 );
 
-				var sound3 = new THREE.PositionalAudio( listener );
-				var oscillator = listener.context.createOscillator();
+				const sound3 = new THREE.PositionalAudio( listener );
+				const oscillator = listener.context.createOscillator();
 				oscillator.type = 'sine';
 				oscillator.frequency.setValueAtTime( 144, sound3.context.currentTime );
 				oscillator.start( 0 );
@@ -119,7 +119,7 @@
 
 				// global ambient audio
 
-				var sound4 = new THREE.Audio( listener );
+				const sound4 = new THREE.Audio( listener );
 				audioLoader.load( 'sounds/Project_Utopia.ogg', function ( buffer ) {
 
 					sound4.setBuffer( buffer );
@@ -131,13 +131,13 @@
 
 				// ground
 
-				var helper = new THREE.GridHelper( 1000, 10, 0x444444, 0x444444 );
+				const helper = new THREE.GridHelper( 1000, 10, 0x444444, 0x444444 );
 				helper.position.y = 0.1;
 				scene.add( helper );
 
 				//
 
-				var SoundControls = function () {
+				const SoundControls = function () {
 
 					this.master = listener.getMasterVolume();
 					this.firstSphere = sound1.getVolume();
@@ -147,18 +147,18 @@
 
 				};
 
-				var GeneratorControls = function () {
+				const GeneratorControls = function () {
 
 					this.frequency = oscillator.frequency.value;
 					this.wavetype = oscillator.type;
 
 				};
 
-				var gui = new GUI();
-				var soundControls = new SoundControls();
-				var generatorControls = new GeneratorControls();
-				var volumeFolder = gui.addFolder( 'sound volume' );
-				var generatorFolder = gui.addFolder( 'sound generator' );
+				const gui = new GUI();
+				const soundControls = new SoundControls();
+				const generatorControls = new GeneratorControls();
+				const volumeFolder = gui.addFolder( 'sound volume' );
+				const generatorFolder = gui.addFolder( 'sound generator' );
 
 				volumeFolder.add( soundControls, 'master' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {
 
@@ -245,7 +245,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				controls.update( delta );
 

examples/webaudio_timing.html

@@ -22,23 +22,23 @@
 
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-		var scene, camera, renderer, clock;
+		let scene, camera, renderer, clock;
 
-		var objects = [];
+		const objects = [];
 
-		var speed = 2.5;
-		var height = 3;
-		var offset = 0.5;
+		const speed = 2.5;
+		const height = 3;
+		const offset = 0.5;
 
-		var startButton = document.getElementById( 'startButton' );
+		const startButton = document.getElementById( 'startButton' );
 		startButton.addEventListener( 'click', init );
 
 		function init() {
 
-			var overlay = document.getElementById( 'overlay' );
+			const overlay = document.getElementById( 'overlay' );
 			overlay.remove();
 
-			var container = document.getElementById( 'container' );
+			const container = document.getElementById( 'container' );
 
 			scene = new THREE.Scene();
 
@@ -51,14 +51,14 @@
 
 			// lights
 
-			var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+			const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 			scene.add( ambientLight );
 
-			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
+			const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
 			directionalLight.position.set( 0, 5, 5 );
 			scene.add( directionalLight );
 
-			var d = 5;
+			const d = 5;
 			directionalLight.castShadow = true;
 			directionalLight.shadow.camera.left = - d;
 			directionalLight.shadow.camera.right = d;
@@ -73,46 +73,46 @@
 
 			// audio
 
-			var audioLoader = new THREE.AudioLoader();
+			const audioLoader = new THREE.AudioLoader();
 
-			var listener = new THREE.AudioListener();
+			const listener = new THREE.AudioListener();
 			camera.add( listener );
 
 			// floor
 
-			var floorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
-			var floorMaterial = new THREE.MeshLambertMaterial( { color: 0x4676b6 } );
+			const floorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
+			const floorMaterial = new THREE.MeshLambertMaterial( { color: 0x4676b6 } );
 
-			var floor = new THREE.Mesh( floorGeometry, floorMaterial );
+			const 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;
+			const count = 5;
+			const radius = 3;
 
-			var ballGeometry = new THREE.SphereBufferGeometry( 0.3, 32, 16 );
+			const ballGeometry = new THREE.SphereBufferGeometry( 0.3, 32, 16 );
 			ballGeometry.translate( 0, 0.3, 0 );
-			var ballMaterial = new THREE.MeshLambertMaterial( { color: 0xcccccc } );
+			const 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 ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
-					var s = i / count * Math.PI * 2;
+					const s = i / count * Math.PI * 2;
 
-					var ball = new THREE.Mesh( ballGeometry, ballMaterial );
+					const 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 );
+					const audio = new THREE.PositionalAudio( listener );
 					audio.setBuffer( buffer );
 					ball.add( audio );
 
@@ -136,7 +136,7 @@
 
 			//
 
-			var controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.minDistance = 1;
 			controls.maxDistance = 25;
 
@@ -165,13 +165,13 @@
 
 		function render() {
 
-			var time = clock.getElapsedTime();
+			const time = clock.getElapsedTime();
 
-			for ( var i = 0; i < objects.length; i ++ ) {
+			for ( let i = 0; i < objects.length; i ++ ) {
 
-				var ball = objects[ i ];
+				const ball = objects[ i ];
 
-				var previousHeight = ball.position.y;
+				const previousHeight = ball.position.y;
 				ball.position.y = Math.abs( Math.sin( i * offset + ( time * speed ) ) * height );
 
 				if ( ball.position.y < previousHeight ) {
@@ -184,7 +184,7 @@
 
 						// ball changed direction from down to up
 
-						var audio = ball.children[ 0 ];
+						const audio = ball.children[ 0 ];
 						audio.play(); // play audio with perfect timing when ball hits the surface
 						ball.userData.down = false;
 

examples/webaudio_visualizer.html

@@ -55,23 +55,23 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var scene, camera, renderer, analyser, uniforms;
+			let scene, camera, renderer, analyser, uniforms;
 
-			var startButton = document.getElementById( 'startButton' );
+			const startButton = document.getElementById( 'startButton' );
 			startButton.addEventListener( 'click', init );
 
 			function init() {
 
-				var fftSize = 128;
+				const fftSize = 128;
 
 				//
 
-				var overlay = document.getElementById( 'overlay' );
+				const overlay = document.getElementById( 'overlay' );
 				overlay.remove();
 
 				//
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -85,14 +85,14 @@
 
 				//
 
-				var listener = new THREE.AudioListener();
+				const listener = new THREE.AudioListener();
 
-				var audio = new THREE.Audio( listener );
-				var file = './sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3';
+				const audio = new THREE.Audio( listener );
+				const file = './sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3';
 
 				if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
 
-					var loader = new THREE.AudioLoader();
+					const loader = new THREE.AudioLoader();
 					loader.load( file, function ( buffer ) {
 
 						audio.setBuffer( buffer );
@@ -102,7 +102,7 @@
 
 				} else {
 
-					var mediaElement = new Audio( file );
+					const mediaElement = new Audio( file );
 					mediaElement.play();
 
 					audio.setMediaElementSource( mediaElement );
@@ -113,13 +113,15 @@
 
 				//
 
+				const format = ( renderer.capabilities.isWebGL2 ) ? THREE.RedFormat : THREE.LuminanceFormat;
+
 				uniforms = {
 
-					tAudioData: { value: new THREE.DataTexture( analyser.data, fftSize / 2, 1, THREE.LuminanceFormat ) }
+					tAudioData: { value: new THREE.DataTexture( analyser.data, fftSize / 2, 1, format ) }
 
 				};
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -127,9 +129,9 @@
 
 				} );
 
-				var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
+				const geometry = new THREE.PlaneBufferGeometry( 1, 1 );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//