Skip to content

Examples: Clean up web audio demos. #20500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 13, 2020
Merged

Examples: Clean up web audio demos. #20500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions examples/webaudio_orientation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ] );

Expand All @@ -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;
Expand All @@ -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 );

Expand All @@ -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 );

Expand All @@ -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;
Expand Down
52 changes: 26 additions & 26 deletions examples/webaudio_sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -55,21 +55,21 @@
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 } );
material3 = new THREE.MeshPhongMaterial( { color: 0x6622aa, flatShading: true, shininess: 0 } );

// 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 );
Expand All @@ -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 );
Expand All @@ -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 );
Expand All @@ -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 );
Expand All @@ -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();
Expand All @@ -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 () {

Expand Down Expand Up @@ -245,7 +245,7 @@

function render() {

var delta = clock.getDelta();
const delta = clock.getDelta();

controls.update( delta );

Expand Down
Loading