edge and ghost material

jsm/TetraGUI.js

@@ -55,8 +55,8 @@ export class TetraGUI extends GUI {
                         scene.vortex.colorFullTextureRotation = 0.006
                         scene.vortex.colorFullMoveForward = 0.013
 
-                        scene.ambientLight.intensity = 0.5
+                        scene.ambientLight.intensity = 1
-                        scene.directionalLight.intensity = 6
+                        scene.directionalLight.intensity = 5
                     }
                 break
                 case "Espace":
@@ -143,27 +143,22 @@ export class TetraGUI extends GUI {
             directionalLightPosition.add(scene.directionalLight.position, "y")
             directionalLightPosition.add(scene.directionalLight.position, "z")
         
-            let directionalLightTargetPosition = this.debug.addFolder("directionalLight.target").close()
-            directionalLightTargetPosition.add(scene.directionalLight.target.position, "x")
-            directionalLightTargetPosition.add(scene.directionalLight.target.position, "y")
-            directionalLightTargetPosition.add(scene.directionalLight.target.position, "z")
-        
             let vortex = this.debug.addFolder("vortex opacity").close()
             vortex.add(scene.vortex.darkCylinder.material, "opacity").name("dark").min(0).max(1)
             vortex.add(scene.vortex.colorFullCylinder.material, "opacity").name("colorFull").min(0).max(1)
 
             let material = this.debug.addFolder("minoes material").close()
-            material.add(minoMaterial, "opacity").min(0).max(1)
+            if ("opacity"             in minoMaterial) material.add(minoMaterial, "opacity").min(0).max(1)
-            //material.add(minoMaterial, "reflectivity").min(0).max(1)
+            if ("reflectivity"        in minoMaterial) material.add(minoMaterial, "reflectivity").min(0).max(1)
-            material.add(minoMaterial, "roughness").min(0).max(1)
+            if ("roughness"           in minoMaterial) material.add(minoMaterial, "roughness").min(0).max(1)
-            material.add(minoMaterial, "metalness").min(0).max(1)
+            if ("metalness"           in minoMaterial) material.add(minoMaterial, "metalness").min(0).max(1)
-            //material.add(minoMaterial, "attenuationDistance").min(0).max(1).hide()
+            if ("attenuationDistance" in minoMaterial) material.add(minoMaterial, "attenuationDistance").min(0).max(1)
-            //material.add(minoMaterial, "ior").min(1).max(2).hide()
+            if ("ior"                 in minoMaterial) material.add(minoMaterial, "ior").min(1).max(2)
-            //material.add(minoMaterial, "sheen").min(0).max(1).hide()
+            if ("sheen"               in minoMaterial) material.add(minoMaterial, "sheen").min(0).max(1)
-            //material.add(minoMaterial, "sheenRoughness").min(0).max(1).hide()
+            if ("sheenRoughness"      in minoMaterial) material.add(minoMaterial, "sheenRoughness").min(0).max(1)
-            //material.add(minoMaterial, "specularIntensity").min(0).max(1).hide()
+            if ("specularIntensity"   in minoMaterial) material.add(minoMaterial, "specularIntensity").min(0).max(1)
-            //material.add(minoMaterial, "thickness").min(0).max(5).hide()
+            if ("thickness"           in minoMaterial) material.add(minoMaterial, "thickness").min(0).max(5)
-            //material.add(minoMaterial, "transmission").min(0).max(1).hide()
+            if ("transmission"        in minoMaterial) material.add(minoMaterial, "transmission").min(0).max(1)
 
             this.fps = new FPS.default()
             document.body.appendChild(this.fps.dom)

jsm/TetraScene.js

@@ -12,15 +12,12 @@ export class TetraScene extends THREE.Scene {
         this.vortex = new Vortex(loadingManager)
         this.add(this.vortex)
         
-        this.ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
+        this.ambientLight = new THREE.AmbientLight(0xffffff, 1)
         this.add(this.ambientLight)
         
-        this.directionalLight = new THREE.DirectionalLight(0xffffff, 6)
+        this.directionalLight = new THREE.DirectionalLight(0xffffff, 5)
-        this.directionalLight.position.set(5, -100, -20)
+        this.directionalLight.position.set(5, 40, 20)
         this.add(this.directionalLight)
-        this.directionalLight.target = new THREE.Object3D()
-        this.directionalLight.target.position.set(5, 0, 0)
-        this.add(this.directionalLight.target)
 
 
         /* Sounds */

jsm/gamelogic.js

@@ -6,7 +6,7 @@ Array.prototype.pick = function () { return this.splice(Math.floor(Math.random()
 
 let P = (x, y, z = 0) => new THREE.Vector3(x, y, z)
 
-const GRAVITY = -20
+const GRAVITY = -30
 
 const COLORS = {
     I: 0xafeff9,
@@ -17,7 +17,8 @@ const COLORS = {
     T: 0xedb2ff,
     Z: 0xffb8c5,
     LOCKING: "white",
-    GHOST: "white",
+    GHOST: 0xc0c0c0,
+    EDGE: 0x88abe0
 }
 
 const TRANSLATION = {
@@ -47,6 +48,11 @@ const FACING = {
 }
 
 
+const ROWS = 24
+const SKYLINE = 20
+const COLUMNS = 10
+
+
 const envRenderTarget = new THREE.WebGLCubeRenderTarget(256)
 const environnement = envRenderTarget.texture
 environnement.type = THREE.HalfFloatType
@@ -211,13 +217,6 @@ class Tetromino extends THREE.InstancedMesh {
     get tSpin() {
         return T_SPIN.NONE
     }
-
-    copy(piece) {
-        this.position.copy(piece.position)
-        this.minoesPosition = piece.minoesPosition
-        this.facing = piece.facing
-        while (this.canMove(TRANSLATION.DOWN)) this.position.y--
-    }
 }
 Tetromino.prototype.minoMaterial = minoMaterial
 Tetromino.prototype.lockingColor = new THREE.Color(COLORS.LOCKING)
@@ -232,14 +231,23 @@ Tetromino.prototype.srs = [
 Tetromino.prototype.lockDelay = 500
 
 
-class Ghost extends Tetromino {}
+class Ghost extends Tetromino {
-Ghost.prototype.minoMaterial = new THREE.MeshBasicMaterial({
+
+    copy(piece) {
+        this.position.copy(piece.position)
+        this.minoesPosition = piece.minoesPosition
+        this.facing = piece.facing
+        while (this.canMove(TRANSLATION.DOWN)) this.position.y--
+    }
+    
+}
+/*Ghost.prototype.minoMaterial = new THREE.MeshBasicMaterial({
     envMap: environnement,
     reflectivity: 0.9,
     transparent: true,
     opacity: 0.15,
     side: THREE.DoubleSide,
-})
+})*/
 Ghost.prototype.freeColor = new THREE.Color(COLORS.GHOST)
 Ghost.prototype.minoesPosition = [
     [P(0, 0, 0), P(0, 0, 0), P(0, 0, 0), P(0, 0, 0)],
@@ -334,23 +342,18 @@ Z.prototype.minoesPosition = [
 Z.prototype.freeColor = new THREE.Color(COLORS.Z)
 
 
-const ROWS = 24
-const SKYLINE = 20
-const COLUMNS = 10
-
-
 class Playfield extends THREE.Group {
     constructor() {
         super()
         this.visible = false
 
-        const edgeMaterial = new THREE.MeshBasicMaterial({
+        const edgeMaterial = new THREE.MeshStandardMaterial({
-            color: 0x88abe0,
+            color: COLORS.EDGE,
             envMap: environnement,
             transparent: true,
-            opacity: 0.4,
+            opacity: 0.2,
-            reflectivity: 0.9,
+            roughness: 0.1,
-            refractionRatio: 0.5
+            metallness: 0.9,
         })
         const edgeShape = new THREE.Shape()
             .moveTo(-.3, SKYLINE)
@@ -410,7 +413,7 @@ class Playfield extends THREE.Group {
         if (piece) {
             this.add(piece)
             piece.position.set(4, SKYLINE)
-            this.ghost.color = piece.freeColor
+            //this.ghost.color = piece.freeColor
             this.ghost.copy(piece)
             this.ghost.visible = true
         }