Skip to content

Commit d9559ca

Browse files
Mugen87Mugen87
committed
Examples: Clean up web audio demos.
1 parent 04847a7 commit d9559ca

4 files changed

Lines changed: 89 additions & 89 deletions

File tree

‎examples/webaudio_orientation.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,24 @@
2929
import { PositionalAudioHelper } from './jsm/helpers/PositionalAudioHelper.js';
3030
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
3131

32-
var scene, camera, renderer;
32+
let scene, camera, renderer;
3333

34-
var startButton = document.getElementById( 'startButton' );
34+
const startButton = document.getElementById( 'startButton' );
3535
startButton.addEventListener( 'click', init );
3636

3737
function init() {
3838

39-
var overlay = document.getElementById( 'overlay' );
39+
const overlay = document.getElementById( 'overlay' );
4040
overlay.remove();
4141

42-
var container = document.getElementById( 'container' );
42+
const container = document.getElementById( 'container' );
4343

4444
//
4545

4646
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
4747
camera.position.set( 3, 2, 3 );
4848

49-
var reflectionCube = new THREE.CubeTextureLoader()
49+
const reflectionCube = new THREE.CubeTextureLoader()
5050
.setPath( 'textures/cube/SwedishRoyalCastle/' )
5151
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
5252

@@ -56,11 +56,11 @@
5656

5757
//
5858

59-
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
59+
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
6060
hemiLight.position.set( 0, 20, 0 );
6161
scene.add( hemiLight );
6262

63-
var dirLight = new THREE.DirectionalLight( 0xffffff );
63+
const dirLight = new THREE.DirectionalLight( 0xffffff );
6464
dirLight.position.set( 5, 5, 0 );
6565
dirLight.castShadow = true;
6666
dirLight.shadow.camera.top = 1;
@@ -75,36 +75,36 @@
7575

7676
//
7777

78-
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 50, 50 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
78+
const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 50, 50 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
7979
mesh.rotation.x = - Math.PI / 2;
8080
mesh.receiveShadow = true;
8181
scene.add( mesh );
8282

83-
var grid = new THREE.GridHelper( 50, 50, 0x888888, 0x888888 );
83+
const grid = new THREE.GridHelper( 50, 50, 0x888888, 0x888888 );
8484
scene.add( grid );
8585

8686
//
8787

88-
var listener = new THREE.AudioListener();
88+
const listener = new THREE.AudioListener();
8989
camera.add( listener );
9090

91-
var audioElement = document.getElementById( 'music' );
91+
const audioElement = document.getElementById( 'music' );
9292
audioElement.play();
9393

94-
var positionalAudio = new THREE.PositionalAudio( listener );
94+
const positionalAudio = new THREE.PositionalAudio( listener );
9595
positionalAudio.setMediaElementSource( audioElement );
9696
positionalAudio.setRefDistance( 1 );
9797
positionalAudio.setDirectionalCone( 180, 230, 0.1 );
9898

99-
var helper = new PositionalAudioHelper( positionalAudio, 0.1 );
99+
const helper = new PositionalAudioHelper( positionalAudio, 0.1 );
100100
positionalAudio.add( helper );
101101

102102
//
103103

104-
var gltfLoader = new GLTFLoader();
104+
const gltfLoader = new GLTFLoader();
105105
gltfLoader.load( 'models/gltf/BoomBox/glTF-Binary/BoomBox.glb', function ( gltf ) {
106106

107-
var boomBox = gltf.scene;
107+
const boomBox = gltf.scene;
108108
boomBox.position.set( 0, 0.2, 0 );
109109
boomBox.scale.set( 20, 20, 20 );
110110

@@ -128,10 +128,10 @@
128128

129129
// sound is damped behind this wall
130130

131-
var wallGeometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );
132-
var wallMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );
131+
const wallGeometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );
132+
const wallMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );
133133

134-
var wall = new THREE.Mesh( wallGeometry, wallMaterial );
134+
const wall = new THREE.Mesh( wallGeometry, wallMaterial );
135135
wall.position.set( 0, 0.5, - 0.5 );
136136
scene.add( wall );
137137

@@ -147,7 +147,7 @@
147147

148148
//
149149

150-
var controls = new OrbitControls( camera, renderer.domElement );
150+
const controls = new OrbitControls( camera, renderer.domElement );
151151
controls.target.set( 0, 0.1, 0 );
152152
controls.update();
153153
controls.minDistance = 0.5;

‎examples/webaudio_sandbox.html‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,26 +26,26 @@
2626

2727
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
2828

29-
var camera, controls, scene, renderer, light;
29+
let camera, controls, scene, renderer, light;
3030

31-
var material1, material2, material3;
31+
let material1, material2, material3;
3232

33-
var analyser1, analyser2, analyser3;
33+
let analyser1, analyser2, analyser3;
3434

35-
var clock = new THREE.Clock();
35+
const clock = new THREE.Clock();
3636

37-
var startButton = document.getElementById( 'startButton' );
37+
const startButton = document.getElementById( 'startButton' );
3838
startButton.addEventListener( 'click', init );
3939

4040
function init() {
4141

42-
var overlay = document.getElementById( 'overlay' );
42+
const overlay = document.getElementById( 'overlay' );
4343
overlay.remove();
4444

4545
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
4646
camera.position.set( 0, 25, 0 );
4747

48-
var listener = new THREE.AudioListener();
48+
const listener = new THREE.AudioListener();
4949
camera.add( listener );
5050

5151
scene = new THREE.Scene();
@@ -55,21 +55,21 @@
5555
light.position.set( 0, 0.5, 1 ).normalize();
5656
scene.add( light );
5757

58-
var sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );
58+
const sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );
5959

6060
material1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, flatShading: true, shininess: 0 } );
6161
material2 = new THREE.MeshPhongMaterial( { color: 0xff2200, flatShading: true, shininess: 0 } );
6262
material3 = new THREE.MeshPhongMaterial( { color: 0x6622aa, flatShading: true, shininess: 0 } );
6363

6464
// sound spheres
6565

66-
var audioLoader = new THREE.AudioLoader();
66+
const audioLoader = new THREE.AudioLoader();
6767

68-
var mesh1 = new THREE.Mesh( sphere, material1 );
68+
const mesh1 = new THREE.Mesh( sphere, material1 );
6969
mesh1.position.set( - 250, 30, 0 );
7070
scene.add( mesh1 );
7171

72-
var sound1 = new THREE.PositionalAudio( listener );
72+
const sound1 = new THREE.PositionalAudio( listener );
7373
audioLoader.load( 'sounds/358232_j_s_song.ogg', function ( buffer ) {
7474

7575
sound1.setBuffer( buffer );
@@ -81,11 +81,11 @@
8181

8282
//
8383

84-
var mesh2 = new THREE.Mesh( sphere, material2 );
84+
const mesh2 = new THREE.Mesh( sphere, material2 );
8585
mesh2.position.set( 250, 30, 0 );
8686
scene.add( mesh2 );
8787

88-
var sound2 = new THREE.PositionalAudio( listener );
88+
const sound2 = new THREE.PositionalAudio( listener );
8989
audioLoader.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg', function ( buffer ) {
9090

9191
sound2.setBuffer( buffer );
@@ -97,12 +97,12 @@
9797

9898
//
9999

100-
var mesh3 = new THREE.Mesh( sphere, material3 );
100+
const mesh3 = new THREE.Mesh( sphere, material3 );
101101
mesh3.position.set( 0, 30, - 250 );
102102
scene.add( mesh3 );
103103

104-
var sound3 = new THREE.PositionalAudio( listener );
105-
var oscillator = listener.context.createOscillator();
104+
const sound3 = new THREE.PositionalAudio( listener );
105+
const oscillator = listener.context.createOscillator();
106106
oscillator.type = 'sine';
107107
oscillator.frequency.setValueAtTime( 144, sound3.context.currentTime );
108108
oscillator.start( 0 );
@@ -119,7 +119,7 @@
119119

120120
// global ambient audio
121121

122-
var sound4 = new THREE.Audio( listener );
122+
const sound4 = new THREE.Audio( listener );
123123
audioLoader.load( 'sounds/Project_Utopia.ogg', function ( buffer ) {
124124

125125
sound4.setBuffer( buffer );
@@ -131,13 +131,13 @@
131131

132132
// ground
133133

134-
var helper = new THREE.GridHelper( 1000, 10, 0x444444, 0x444444 );
134+
const helper = new THREE.GridHelper( 1000, 10, 0x444444, 0x444444 );
135135
helper.position.y = 0.1;
136136
scene.add( helper );
137137

138138
//
139139

140-
var SoundControls = function () {
140+
const SoundControls = function () {
141141

142142
this.master = listener.getMasterVolume();
143143
this.firstSphere = sound1.getVolume();
@@ -147,18 +147,18 @@
147147

148148
};
149149

150-
var GeneratorControls = function () {
150+
const GeneratorControls = function () {
151151

152152
this.frequency = oscillator.frequency.value;
153153
this.wavetype = oscillator.type;
154154

155155
};
156156

157-
var gui = new GUI();
158-
var soundControls = new SoundControls();
159-
var generatorControls = new GeneratorControls();
160-
var volumeFolder = gui.addFolder( 'sound volume' );
161-
var generatorFolder = gui.addFolder( 'sound generator' );
157+
const gui = new GUI();
158+
const soundControls = new SoundControls();
159+
const generatorControls = new GeneratorControls();
160+
const volumeFolder = gui.addFolder( 'sound volume' );
161+
const generatorFolder = gui.addFolder( 'sound generator' );
162162

163163
volumeFolder.add( soundControls, 'master' ).min( 0.0 ).max( 1.0 ).step( 0.01 ).onChange( function () {
164164

@@ -245,7 +245,7 @@
245245

246246
function render() {
247247

248-
var delta = clock.getDelta();
248+
const delta = clock.getDelta();
249249

250250
controls.update( delta );
251251

0 commit comments

Comments
 (0)