From d0d65b86544a618ff7d7c952b898ca6811d8cfbe Mon Sep 17 00:00:00 2001 From: adrien Date: Mon, 26 Jan 2026 13:07:31 +0100 Subject: [PATCH] opaque background --- jsm/Menu.js | 4 +-- jsm/Stats.js | 2 +- jsm/TetraScene.js | 9 +++--- jsm/Tetrominoes.js | 2 +- jsm/Vortex.js | 74 ++++++++++++++++++++++------------------------ 5 files changed, 44 insertions(+), 47 deletions(-) diff --git a/jsm/Menu.js b/jsm/Menu.js index 75bd66c..efd7937 100644 --- a/jsm/Menu.js +++ b/jsm/Menu.js @@ -148,8 +148,8 @@ export class Menu extends GUI { directionalLightPosition.add(scene.directionalLight.position, "z").listen() let vortex = dev.addFolder("vortex opacity").close() - vortex.add(scene.vortex.darkCylinder.material, "opacity").name("dark").min(0).max(1).listen() - vortex.add(scene.vortex.colorFullCylinder.material, "opacity").name("colorFull").min(0).max(1).listen() + vortex.add(scene.vortex.transparentCylinder.material, "opacity").name("dark").min(0).max(1).listen() + vortex.add(scene.vortex.opaqueCylinder.material, "opacity").name("opaque").min(0).max(1).listen() changeMaterial(scene.minoes.material.constructor.name) diff --git a/jsm/Stats.js b/jsm/Stats.js index 358aff7..c00450d 100644 --- a/jsm/Stats.js +++ b/jsm/Stats.js @@ -110,7 +110,7 @@ class Stats { let patternScore = 100 * this.level * awardedLineClears if (tSpin) messagesSpan.addNewChild("div", { className: "rotate-in-animation", - innerHTML: tSpin + innerHTML: tSpin.replace(" ", "
") }) if (nbClearedLines) messagesSpan.addNewChild("div", { className: "zoom-in-animation", diff --git a/jsm/TetraScene.js b/jsm/TetraScene.js index dc94715..7057dba 100644 --- a/jsm/TetraScene.js +++ b/jsm/TetraScene.js @@ -35,7 +35,7 @@ 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) + this.fog = new THREE.Fog(0xffffff, 0, 200) /* Sounds */ this.music = music @@ -75,7 +75,7 @@ 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.background = new THREE.Color(0xffffff); + this.background = new THREE.Color(0xffffff) this.fog.color.set(0xffffff) this.playfield.edge.visible = true this.playfield.retroEdge.visible = false @@ -83,9 +83,9 @@ export class TetraScene extends THREE.Scene { case "Espace": this.ambientLight.intensity = 7 this.directionalLight.intensity = 5 - this.directionalLight.position.set(2, -3, 20) + this.directionalLight.position.set(2, 15, 20) this.music.src = "audio/benevolence.m4a" - this.background = new THREE.Color(0x000000); + this.background = new THREE.Color(0x000000) this.fog.color.set(0x000000) this.playfield.edge.visible = true this.playfield.retroEdge.visible = false @@ -95,6 +95,7 @@ export class TetraScene extends THREE.Scene { this.directionalLight.intensity = 10 this.directionalLight.position.set(19, 120, 200) this.music.src = "audio/Tetris_MkVaffQuasi_Ultimix_OC_ReMix.mp3" + this.background = new THREE.Color(0x000000) this.fog.color.set(0x000000) this.playfield.edge.visible = false this.playfield.retroEdge.visible = true diff --git a/jsm/Tetrominoes.js b/jsm/Tetrominoes.js index b9775a2..f85fc79 100644 --- a/jsm/Tetrominoes.js +++ b/jsm/Tetrominoes.js @@ -39,7 +39,7 @@ const ROTATION = { const T_SPIN = { NONE: "", - MINI: "PETITE
PIROUETTE", + MINI: "PETITE PIROUETTE", T_SPIN: "PIROUETTE" } diff --git a/jsm/Vortex.js b/jsm/Vortex.js index 96f24be..d064b45 100644 --- a/jsm/Vortex.js +++ b/jsm/Vortex.js @@ -9,31 +9,31 @@ export class Vortex extends THREE.Group { this.globalRotation = 0.028 - this.darkTextureRotation = 0.006 - this.darkMoveForward = 0.009 - - this.colorFullTextureRotation = 0.006 - this.colorFullMoveForward = 0.025 + this.transparentTextureRotation = 0.006 + this.transparentMoveForward = 0.009 + + this.opaqueTextureRotation = 0.006 + this.opaqueMoveForward = 0.025 const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 1000, 12, 1, true) - this.colorFullCylinder = new THREE.Mesh( + this.opaqueCylinder = new THREE.Mesh( commonCylinderGeometry, new THREE.MeshBasicMaterial({ side: THREE.BackSide, blending: THREE.NormalBlending }) ) - this.add(this.colorFullCylinder) + this.add(this.opaqueCylinder) - this.darkCylinder = new THREE.Mesh( + this.transparentCylinder = new THREE.Mesh( commonCylinderGeometry, new THREE.MeshLambertMaterial({ side: THREE.BackSide, blending: THREE.AdditiveBlending }) ) - this.add(this.darkCylinder) + this.add(this.transparentCylinder) this.position.set(5, 100, -10) } @@ -47,51 +47,47 @@ export class Vortex extends THREE.Group { texture.wrapS = THREE.RepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping texture.repeat.set(1, 2) - this.darkCylinder.material.map = texture + this.transparentCylinder.material.map = texture }) - this.darkCylinder.material.opacity = 0.14 + this.transparentCylinder.material.opacity = 0.14 new THREE.TextureLoader(this.loadingManager).load("./images/plasma2.jpg", texture => { texture.wrapS = THREE.RepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping texture.repeat.set(2, 2) - this.colorFullCylinder.material.map = texture + this.opaqueCylinder.material.map = texture }) - this.colorFullCylinder.material.opacity = 0.6 - this.colorFullCylinder.material.blending = THREE.NormalBlending this.globalRotation = 0.028 - this.darkTextureRotation = 0.005 - this.darkMoveForward = 0.009 - this.colorFullTextureRotation = 0.006 - this.colorFullMoveForward = 0.025 + this.transparentTextureRotation = 0.005 + this.transparentMoveForward = 0.009 + this.opaqueTextureRotation = 0.006 + this.opaqueMoveForward = 0.025 this.visible = true break case "Espace": - new THREE.TextureLoader(this.loadingManager).load("./images/stars_space.jpg", texture => { - texture.wrapS = THREE.RepeatWrapping - texture.wrapT = THREE.MirroredRepeatWrapping - texture.repeat.set(3, 6) - this.darkCylinder.material.map = texture - }) - this.darkCylinder.material.opacity = 0.2 - new THREE.TextureLoader(this.loadingManager).load("./images/colorfull.jpg", texture => { texture.wrapS = THREE.RepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping texture.repeat.set(2, 4) - this.colorFullCylinder.material.map = texture + this.transparentCylinder.material.map = texture + }) + this.transparentCylinder.material.opacity = 0.12 + + new THREE.TextureLoader(this.loadingManager).load("./images/stars_space.jpg", texture => { + texture.wrapS = THREE.RepeatWrapping + texture.wrapT = THREE.RepeatWrapping + texture.repeat.set(3, 6) + this.opaqueCylinder.material.map = texture }) - this.colorFullCylinder.material.opacity = 0.1 - this.colorFullCylinder.material.blending = THREE.AdditiveBlending this.globalRotation = 0.028 - this.darkTextureRotation = 0.006 - this.darkMoveForward = 0.03 - this.colorFullTextureRotation = 0.006 - this.colorFullMoveForward = 0.012 + this.opaqueTextureRotation = 0.006 + this.opaqueMoveForward = 0.03 + this.transparentTextureRotation = 0.006 + this.transparentMoveForward = 0.012 this.visible = true break @@ -106,14 +102,14 @@ export class Vortex extends THREE.Group { if (this.visible) { this.rotation.y += this.globalRotation * delta - if (this.darkCylinder.material.map) { - this.darkCylinder.material.map.offset.y += this.darkMoveForward * delta - this.darkCylinder.material.map.offset.x += this.darkTextureRotation * delta + if (this.transparentCylinder.material.map) { + this.transparentCylinder.material.map.offset.y += this.transparentMoveForward * delta + this.transparentCylinder.material.map.offset.x += this.transparentTextureRotation * delta } - if (this.colorFullCylinder.material.map) { - this.colorFullCylinder.material.map.offset.y += this.colorFullMoveForward * delta - this.colorFullCylinder.material.map.offset.x += this.colorFullTextureRotation * delta + if (this.opaqueCylinder.material.map) { + this.opaqueCylinder.material.map.offset.y += this.opaqueMoveForward * delta + this.opaqueCylinder.material.map.offset.x += this.opaqueTextureRotation * delta } } }