export scene

app.js

@@ -5,7 +5,7 @@ import { Settings } from './jsm/Settings.js'
 import { Stats } from './jsm/Stats.js'
 import { TetraGUI } from './jsm/TetraGUI.js'
 import { TetraControls } from './jsm/TetraControls.js'
-import { Vortex } from './jsm/Vortex.js'
+import { TetraScene } from './jsm/TetraScene.js'
 
 
 HTMLElement.prototype.addNewChild = function (tag, properties) {
@@ -17,61 +17,6 @@ HTMLElement.prototype.addNewChild = function (tag, properties) {
 }
 
 
-/* Scene */
-
-const loadingManager = new THREE.LoadingManager()
-loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
-    loadingPercent.innerText = "0%"
-}
-loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {
-    loadingPercent.innerText = Math.floor(100 * itemsLoaded / itemsTotal) + '%'
-}
-loadingManager.onLoad = function () {
-    loaddingCircle.remove()
-    renderer.setAnimationLoop(animate)
-    gui.startButton.show()
-}
-loadingManager.onError = function (url) {
-    loadingPercent.innerText = "Erreur"
-}
-
-const scene = new THREE.Scene()
-
-scene.vortex = new Vortex(loadingManager)
-scene.add(scene.vortex)
-
-const renderer = new THREE.WebGLRenderer({
-    powerPreference: "high-performance",
-    antialias: true,
-    stencil: false
-})
-renderer.setSize(window.innerWidth, window.innerHeight)
-renderer.setClearColor(0x000000, 10)
-renderer.toneMapping = THREE.ACESFilmicToneMapping
-document.body.appendChild(renderer.domElement)
-
-scene.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
-scene.camera.position.set(5, 0, 16)
-        
-scene.ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
-scene.add(scene.ambientLight)
-
-scene.directionalLight = new THREE.DirectionalLight(0xffffff, 15)
-scene.directionalLight.position.set(5, 100, -10)
-scene.add(scene.directionalLight)
-
-const holdQueue = new HoldQueue()
-scene.add(holdQueue)
-const matrix = new Matrix()
-scene.add(matrix)
-const nextQueue = new NextQueue()
-scene.add(nextQueue)
-
-messagesSpan.onanimationend = function (event) {
-    event.target.remove()
-}
-
-
 /* Game logic */
 
 let game = {
@@ -205,8 +150,6 @@ let game = {
 
 /* Handle player inputs */
 
-const controls = new TetraControls(scene.camera, renderer.domElement)
-
 let playerActions = {
     moveLeft: () => matrix.piece.move(TRANSLATION.LEFT),
 
@@ -306,48 +249,63 @@ function onkeyup(event) {
 }
 
 
-/* Sounds */
+/* Scene */
 
-const listener = new THREE.AudioListener()
-scene.camera.add( listener )
-const audioLoader = new THREE.AudioLoader(loadingManager)
+const loadingManager = new THREE.LoadingManager()
+loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
+    loadingPercent.innerText = "0%"
+}
+loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {
+    loadingPercent.innerText = Math.floor(100 * itemsLoaded / itemsTotal) + '%'
+}
+loadingManager.onLoad = function () {
+    loaddingCircle.remove()
+    renderer.setAnimationLoop(animate)
+    gui.startButton.show()
+}
+loadingManager.onError = function (url) {
+    loadingPercent.innerText = "Erreur"
+}
 
-scene.music = new THREE.Audio(listener)
-audioLoader.load('audio/Tetris_CheDDer_OC_ReMix.mp3', function( buffer ) {
-	scene.music.setBuffer(buffer)
-	scene.music.setLoop(true)
-    scene.music.setVolume(settings.musicVolume/100)
-	if (game.playing) scene.music.play()
-})
-scene.lineClearSound = new THREE.Audio(listener)
-audioLoader.load('audio/line-clear.ogg', function( buffer ) {
-    scene.lineClearSound.setBuffer(buffer)
-    scene.lineClearSound.setVolume(settings.sfxVolume/100)
-})
-scene.tetrisSound = new THREE.Audio(listener)
-audioLoader.load('audio/tetris.ogg', function( buffer ) {
-    scene.tetrisSound.setBuffer(buffer)
-    scene.tetrisSound.setVolume(settings.sfxVolume/100)
-})
-scene.hardDropSound = new THREE.Audio(listener)
-audioLoader.load('audio/hard-drop.wav', function( buffer ) {
-    scene.hardDropSound.setBuffer(buffer)
-    scene.hardDropSound.setVolume(settings.sfxVolume/100)
+
+const renderer = new THREE.WebGLRenderer({
+    powerPreference: "high-performance",
+    antialias: true,
+    stencil: false
 })
+renderer.setSize(window.innerWidth, window.innerHeight)
+renderer.setClearColor(0x000000, 10)
+renderer.toneMapping = THREE.ACESFilmicToneMapping
+document.body.appendChild(renderer.domElement)
 
 
-let stats     = new Stats()
-let settings  = new Settings()
+const stats     = new Stats()
+const settings  = new Settings()
 
-var gui = new TetraGUI(game, settings, stats, scene)
+const scene = new TetraScene(loadingManager, settings)
+
+const gui = new TetraGUI(game, settings, stats, scene)
 
 const clock = new THREE.Clock()
 
+const holdQueue = new HoldQueue()
+scene.add(holdQueue)
+const matrix = new Matrix()
+scene.add(matrix)
+const nextQueue = new NextQueue()
+scene.add(nextQueue)
+
+const controls = new TetraControls(scene.camera, renderer.domElement)
+
+messagesSpan.onanimationend = function (event) {
+    event.target.remove()
+}
+
+
 function animate() {
 
     const delta = clock.getDelta()
-
-    scene.vortex.update(delta)
+    scene.update(delta)
     matrix.update(delta)
     controls.update()
     gui.update()

index.html

@@ -6,8 +6,8 @@
       <meta charset="utf-8" />
       <title>teTra</title>
       <link rel="icon" href="favicon.ico">
-      <link rel="stylesheet" href="loading.css">
       <link rel="stylesheet" href="style.css">
+      <link rel="stylesheet" href="loading.css">
       <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
       <script type="importmap">
         {

jsm/TetraScene.js

@@ -0,0 +1,59 @@
+import * as THREE from 'three'
+import { Vortex } from './Vortex.js'
+
+
+class TetraScene extends THREE.Scene {
+    constructor(loadingManager, settings) {
+        super()
+
+        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+        this.camera.position.set(5, 0, 16)
+
+        this.vortex = new Vortex(loadingManager)
+        this.add(this.vortex)
+        
+        this.ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
+        this.add(this.ambientLight)
+        
+        this.directionalLight = new THREE.DirectionalLight(0xffffff, 15)
+        this.directionalLight.position.set(5, 100, -10)
+        this.add(this.directionalLight)
+
+
+        /* Sounds */
+        
+        const listener = new THREE.AudioListener()
+        this.camera.add( listener )
+        const audioLoader = new THREE.AudioLoader(loadingManager)
+        
+        this.music = new THREE.Audio(listener)
+        audioLoader.load('audio/Tetris_CheDDer_OC_ReMix.mp3', function( buffer ) {
+            this.music.setBuffer(buffer)
+            this.music.setLoop(true)
+            this.music.setVolume(settings.musicVolume/100)
+            //if (game.playing) this.music.play()
+        }.bind(this))
+        this.lineClearSound = new THREE.Audio(listener)
+        audioLoader.load('audio/line-clear.ogg', function( buffer ) {
+            this.lineClearSound.setBuffer(buffer)
+            this.lineClearSound.setVolume(settings.sfxVolume/100)
+        }.bind(this))
+        this.tetrisSound = new THREE.Audio(listener)
+        audioLoader.load('audio/tetris.ogg', function( buffer ) {
+            this.tetrisSound.setBuffer(buffer)
+            this.tetrisSound.setVolume(settings.sfxVolume/100)
+        }.bind(this))
+        this.hardDropSound = new THREE.Audio(listener)
+        audioLoader.load('audio/hard-drop.wav', function( buffer ) {
+            this.hardDropSound.setBuffer(buffer)
+            this.hardDropSound.setVolume(settings.sfxVolume/100)
+        }.bind(this))
+    }
+
+    update(delta) {
+        this.vortex.update(delta)
+    }
+}
+
+
+export { TetraScene }