fog

jsm/Menu.js

@@ -75,7 +75,7 @@ export class Menu extends GUI {
         let material
         function changeMaterial() {
             material?.destroy()
-            material = dev.addFolder("minoes material")
+            material = dev.addFolder("minoes material").close()
             material.add(minoes.material, "constructor", ["MeshBasicMaterial", "MeshStandardMaterial", "MeshPhysicalMaterial"]).listen().onChange(type => {
                 switch(type) {
                     case "MeshBasicMaterial":
@@ -129,6 +129,8 @@ export class Menu extends GUI {
             if ("transmission"        in minoMaterial) material.add(minoMaterial, "transmission"       ).min(0).max(1)
             if ("clearcoat"           in minoMaterial) material.add(minoMaterial, "clearcoat"          ).min(0).max(1)
             if ("clearcoatRoughness"  in minoMaterial) material.add(minoMaterial, "clearcoatRoughness" ).min(0).max(1)
+
+            return material
         }
 
         let dev
@@ -154,7 +156,11 @@ export class Menu extends GUI {
             vortex.add(scene.vortex.colorFullCylinder.material, "opacity").name("colorFull").min(0).max(1).listen()
 
             changeMaterial(minoes.material.constructor.name)
-            material.close()
+
+            let fog = dev.addFolder("fog").close()
+            fog.add(scene.fog, "near", 0, 200)
+            fog.add(scene.fog, "far", 0, 200)
+            fog.addColor(scene, "fogColor")
         }
     }
 

jsm/TetraScene.js

@@ -18,6 +18,8 @@ export class TetraScene extends THREE.Scene {
         this.directionalLight = new THREE.DirectionalLight(0xffffff, 11)
         this.add(this.directionalLight)
 
+        this.fog = new THREE.Fog(0xffffff, 50, 150)
+
         /* Sounds */
         this.music = music
 
@@ -51,23 +53,33 @@ export class TetraScene extends THREE.Scene {
                 this.directionalLight.intensity = 1.75
                 this.directionalLight.position.set(5, -20, 20)
                 this.music.src = "audio/benevolence.m4a"
+                this.fog.color.set(0xffffff)
                 break
             case "Espace":
                 this.ambientLight.intensity     = 7
                 this.directionalLight.intensity = 5
                 this.directionalLight.position.set(2, -3, 20)
                 this.music.src = "audio/benevolence.m4a"
+                this.fog.color.set(0x000000)
             break
             case "Rétro":
                 this.ambientLight.intensity     = 1
                 this.directionalLight.intensity = 10
                 this.directionalLight.position.set(19, 120, 200)
                 this.music.src = "audio/Tetris_MkVaffQuasi_Ultimix_OC_ReMix.mp3"
+                this.fog.color.set(0x000000)
             break
         }
         this.vortex.theme = theme
     }
 
+    get fogColor() {
+        return this.fog.color.getHexString()
+    }
+    set fogColor(color) {
+        this.fog.color.set(color)
+    }
+
     update(delta) {
         this.vortex.update(delta)
     }

jsm/Tetrominoes.js

@@ -212,7 +212,7 @@ class Mino extends THREE.Object3D {
         this.velocity.y += delta * GRAVITY
         this.position.addScaledVector(this.velocity, delta)
         this.rotateOnWorldAxis(this.rotationAngle, delta * this.angularVelocity)
-        if (Math.sqrt(this.position.x * this.position.x + this.position.z * this.position.z) > 40 || this.position.y < -50) {
+        if (this.position.y > 200 || Math.sqrt(this.position.x * this.position.x + this.position.z * this.position.z) > 50) {
             this.dispose()
             return true
         } else {