stream background music

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()
 

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)

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)