adrien/teTra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

opaque background

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-26 13:07:31 +01:00
parent d5b6149992
commit d0d65b8654
5 changed files with 44 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
jsm/Menu.js
View File

@@ -148,8 +148,8 @@ export class Menu extends GUI {
directionalLightPosition.add(scene.directionalLight.position, "z").listen() directionalLightPosition.add(scene.directionalLight.position, "z").listen()
let vortex = dev.addFolder("vortex opacity").close() 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.transparentCylinder.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.opaqueCylinder.material, "opacity").name("opaque").min(0).max(1).listen()
changeMaterial(scene.minoes.material.constructor.name) changeMaterial(scene.minoes.material.constructor.name)

2
jsm/Stats.js
View File

@@ -110,7 +110,7 @@ class Stats {
let patternScore = 100 * this.level * awardedLineClears let patternScore = 100 * this.level * awardedLineClears
if (tSpin) messagesSpan.addNewChild("div", { if (tSpin) messagesSpan.addNewChild("div", {
className: "rotate-in-animation", className: "rotate-in-animation",
innerHTML: tSpin innerHTML: tSpin.replace(" ", "<br/>")
}) })
if (nbClearedLines) messagesSpan.addNewChild("div", { if (nbClearedLines) messagesSpan.addNewChild("div", {
className: "zoom-in-animation", className: "zoom-in-animation",

9
jsm/TetraScene.js
View File

@@ -35,7 +35,7 @@ export class TetraScene extends THREE.Scene {
this.directionalLight = new THREE.DirectionalLight(0xffffff, 11) this.directionalLight = new THREE.DirectionalLight(0xffffff, 11)
this.add(this.directionalLight) this.add(this.directionalLight)
this.fog = new THREE.Fog(0xffffff, 50, 150) this.fog = new THREE.Fog(0xffffff, 0, 200)
/* Sounds */ /* Sounds */
this.music = music this.music = music
@@ -75,7 +75,7 @@ export class TetraScene extends THREE.Scene {
this.directionalLight.intensity = 1.75 this.directionalLight.intensity = 1.75
this.directionalLight.position.set(5, -20, 20) this.directionalLight.position.set(5, -20, 20)
this.music.src = "audio/benevolence.m4a" this.music.src = "audio/benevolence.m4a"
this.background = new THREE.Color(0xffffff); this.background = new THREE.Color(0xffffff)
this.fog.color.set(0xffffff) this.fog.color.set(0xffffff)
this.playfield.edge.visible = true this.playfield.edge.visible = true
this.playfield.retroEdge.visible = false this.playfield.retroEdge.visible = false
@@ -83,9 +83,9 @@ export class TetraScene extends THREE.Scene {
case "Espace": case "Espace":
this.ambientLight.intensity = 7 this.ambientLight.intensity = 7
this.directionalLight.intensity = 5 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.music.src = "audio/benevolence.m4a"
this.background = new THREE.Color(0x000000); this.background = new THREE.Color(0x000000)
this.fog.color.set(0x000000) this.fog.color.set(0x000000)
this.playfield.edge.visible = true this.playfield.edge.visible = true
this.playfield.retroEdge.visible = false this.playfield.retroEdge.visible = false
@@ -95,6 +95,7 @@ export class TetraScene extends THREE.Scene {
this.directionalLight.intensity = 10 this.directionalLight.intensity = 10
this.directionalLight.position.set(19, 120, 200) this.directionalLight.position.set(19, 120, 200)
this.music.src = "audio/Tetris_MkVaffQuasi_Ultimix_OC_ReMix.mp3" this.music.src = "audio/Tetris_MkVaffQuasi_Ultimix_OC_ReMix.mp3"
this.background = new THREE.Color(0x000000)
this.fog.color.set(0x000000) this.fog.color.set(0x000000)
this.playfield.edge.visible = false this.playfield.edge.visible = false
this.playfield.retroEdge.visible = true this.playfield.retroEdge.visible = true

2
jsm/Tetrominoes.js
View File

@@ -39,7 +39,7 @@ const ROTATION = {
const T_SPIN = { const T_SPIN = {
NONE: "", NONE: "",
MINI: "PETITE<br/>PIROUETTE", MINI: "PETITE PIROUETTE",
T_SPIN: "PIROUETTE" T_SPIN: "PIROUETTE"
} }

72
jsm/Vortex.js
View File

@@ -9,31 +9,31 @@ export class Vortex extends THREE.Group {
this.globalRotation = 0.028 this.globalRotation = 0.028
this.darkTextureRotation = 0.006 this.transparentTextureRotation = 0.006
this.darkMoveForward = 0.009 this.transparentMoveForward = 0.009
this.colorFullTextureRotation = 0.006 this.opaqueTextureRotation = 0.006
this.colorFullMoveForward = 0.025 this.opaqueMoveForward = 0.025
const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 1000, 12, 1, true) const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 1000, 12, 1, true)
this.colorFullCylinder = new THREE.Mesh( this.opaqueCylinder = new THREE.Mesh(
commonCylinderGeometry, commonCylinderGeometry,
new THREE.MeshBasicMaterial({ new THREE.MeshBasicMaterial({
side: THREE.BackSide, side: THREE.BackSide,
blending: THREE.NormalBlending blending: THREE.NormalBlending
}) })
) )
this.add(this.colorFullCylinder) this.add(this.opaqueCylinder)
this.darkCylinder = new THREE.Mesh( this.transparentCylinder = new THREE.Mesh(
commonCylinderGeometry, commonCylinderGeometry,
new THREE.MeshLambertMaterial({ new THREE.MeshLambertMaterial({
side: THREE.BackSide, side: THREE.BackSide,
blending: THREE.AdditiveBlending blending: THREE.AdditiveBlending
}) })
) )
this.add(this.darkCylinder) this.add(this.transparentCylinder)
this.position.set(5, 100, -10) this.position.set(5, 100, -10)
} }
@@ -47,51 +47,47 @@ export class Vortex extends THREE.Group {
texture.wrapS = THREE.RepeatWrapping texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(1, 2) 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 => { new THREE.TextureLoader(this.loadingManager).load("./images/plasma2.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 2) 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.globalRotation = 0.028
this.darkTextureRotation = 0.005 this.transparentTextureRotation = 0.005
this.darkMoveForward = 0.009 this.transparentMoveForward = 0.009
this.colorFullTextureRotation = 0.006 this.opaqueTextureRotation = 0.006
this.colorFullMoveForward = 0.025 this.opaqueMoveForward = 0.025
this.visible = true this.visible = true
break break
case "Espace": 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 => { new THREE.TextureLoader(this.loadingManager).load("./images/colorfull.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 4) 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.globalRotation = 0.028
this.darkTextureRotation = 0.006 this.opaqueTextureRotation = 0.006
this.darkMoveForward = 0.03 this.opaqueMoveForward = 0.03
this.colorFullTextureRotation = 0.006 this.transparentTextureRotation = 0.006
this.colorFullMoveForward = 0.012 this.transparentMoveForward = 0.012
this.visible = true this.visible = true
break break
@@ -106,14 +102,14 @@ export class Vortex extends THREE.Group {
if (this.visible) { if (this.visible) {
this.rotation.y += this.globalRotation * delta this.rotation.y += this.globalRotation * delta
if (this.darkCylinder.material.map) { if (this.transparentCylinder.material.map) {
this.darkCylinder.material.map.offset.y += this.darkMoveForward * delta this.transparentCylinder.material.map.offset.y += this.transparentMoveForward * delta
this.darkCylinder.material.map.offset.x += this.darkTextureRotation * delta this.transparentCylinder.material.map.offset.x += this.transparentTextureRotation * delta
} }
if (this.colorFullCylinder.material.map) { if (this.opaqueCylinder.material.map) {
this.colorFullCylinder.material.map.offset.y += this.colorFullMoveForward * delta this.opaqueCylinder.material.map.offset.y += this.opaqueMoveForward * delta
this.colorFullCylinder.material.map.offset.x += this.colorFullTextureRotation * delta this.opaqueCylinder.material.map.offset.x += this.opaqueTextureRotation * delta
} }
} }
} }