diff --git a/app.js b/app.js index 9818d61..862b436 100644 --- a/app.js +++ b/app.js @@ -274,11 +274,27 @@ renderer.toneMapping = THREE.ACESFilmicToneMapping document.body.appendChild(renderer.domElement) renderer.domElement.tabIndex = 1 +const loadingManager = new THREE.LoadingManager( + function() { + loaddingCircle.remove() + gui.startButton.show() + renderer.setAnimationLoop(animate) + }, + function (url, itemsLoaded, itemsTotal) { + loadingPercent.innerText = Math.floor(100 * itemsLoaded / itemsTotal) + '%' + }, + function (url) { + loadingPercent.innerText = "Erreur" + } +) +loadingManager.onStart = function (url, itemsLoaded, itemsTotal) { + loadingPercent.innerText = "0%" +} const stats = new Stats() const settings = new Settings() -const scene = new TetraScene(settings) +const scene = new TetraScene(settings, loadingManager) const controls = new TetraControls(scene.camera, renderer.domElement) @@ -297,21 +313,6 @@ messagesSpan.onanimationend = function (event) { event.target.remove() } -scene.loadingManager.onStart = function (url, itemsLoaded, itemsTotal) { - loadingPercent.innerText = "0%" -} -scene.loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) { - loadingPercent.innerText = Math.floor(100 * itemsLoaded / itemsTotal) + '%' -} -scene.loadingManager.onLoad = function () { - loaddingCircle.remove() - gui.startButton.show() - renderer.setAnimationLoop(animate) -} -scene.loadingManager.onError = function (url) { - loadingPercent.innerText = "Erreur" -} - const clock = new THREE.Clock() diff --git a/jsm/TetraGUI.js b/jsm/TetraGUI.js index 75422ee..40a4578 100644 --- a/jsm/TetraGUI.js +++ b/jsm/TetraGUI.js @@ -120,7 +120,7 @@ export class TetraGUI extends GUI { this.settings.volume = this.settings.addFolder("Volume").open() this.settings.volume.add(settings,"musicVolume").name("Musique").min(0).max(100).step(1).onChange(volume => { - scene.music.setVolume(volume/100) + scene.music.volume = settings.musicVolume / 100 }) this.settings.volume.add(settings,"sfxVolume").name("Effets").min(0).max(100).step(1).onChange(volume => { scene.lineClearSound.setVolume(volume/100) diff --git a/jsm/TetraScene.js b/jsm/TetraScene.js index 8b11409..5f918d2 100644 --- a/jsm/TetraScene.js +++ b/jsm/TetraScene.js @@ -3,15 +3,13 @@ import { Vortex } from './Vortex.js' export class TetraScene extends THREE.Scene { - constructor(settings) { + constructor(settings, loadingManager) { super() - this.loadingManager = new THREE.LoadingManager() - this.camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000) this.camera.position.set(5, 3, 12) - this.vortex = new Vortex(this.loadingManager) + this.vortex = new Vortex(loadingManager) this.add(this.vortex) this.ambientLight = new THREE.AmbientLight(0xffffff, 1) @@ -23,17 +21,14 @@ export class TetraScene extends THREE.Scene { /* Sounds */ + this.music = new Audio('audio/benevolence.m4a') + this.music.loop = true + this.music.volume = settings.musicVolume / 100 const listener = new THREE.AudioListener() this.camera.add( listener ) - const audioLoader = new THREE.AudioLoader(this.loadingManager) - - this.music = new THREE.Audio(listener) - audioLoader.load('audio/benevolence.m4a', function( buffer ) { - this.music.setBuffer(buffer) - this.music.setLoop(true) - this.music.setVolume(settings.musicVolume/100) - }.bind(this)) + const audioLoader = new THREE.AudioLoader(loadingManager) + this.lineClearSound = new THREE.Audio(listener) audioLoader.load('audio/line-clear.ogg', function( buffer ) { this.lineClearSound.setBuffer(buffer)