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

upatre

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-09-25 15:24:28 +02:00
parent aa2475dc3a
commit 8ed998f255
5 changed files with 164 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app.js
View File

@ -276,9 +276,9 @@ renderer.toneMapping = THREE.ACESFilmicToneMapping
document.body.appendChild(renderer.domElement) document.body.appendChild(renderer.domElement)
renderer.domElement.tabIndex = 1 renderer.domElement.tabIndex = 1
const loadingManager = new THREE.LoadingManager( let loadingManager = new THREE.LoadingManager(
function() { function() {
loaddingCircle.remove() loaddingCircle.style.display = "none"
gui.startButton.show() gui.startButton.show()
renderer.setAnimationLoop(animate) renderer.setAnimationLoop(animate)
}, },
@ -291,15 +291,13 @@ const loadingManager = new THREE.LoadingManager(
) )
loadingManager.onStart = function (url, itemsLoaded, itemsTotal) { loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
loadingPercent.innerText = "0%" loadingPercent.innerText = "0%"
loaddingCircle.style.display = "block"
} }
const stats = new Stats() const stats = new Stats()
const settings = new Settings() const settings = new Settings()
const scene = new TetraScene(settings, loadingManager) const scene = new TetraScene(settings, loadingManager)
const controls = new TetraControls(scene.camera, renderer.domElement) const controls = new TetraControls(scene.camera, renderer.domElement)
const gui = new TetraGUI(game, settings, stats, scene, controls) const gui = new TetraGUI(game, settings, stats, scene, controls)
scene.add(Mino.mesh) scene.add(Mino.mesh)
@ -319,7 +317,6 @@ messagesSpan.onanimationend = function (event) {
const clock = new THREE.Clock() const clock = new THREE.Clock()
function animate() { function animate() {
const delta = clock.getDelta() const delta = clock.getDelta()
scene.updateMatrixWorld() scene.updateMatrixWorld()
scene.update(delta) scene.update(delta)

2
jsm/Settings.js
View File

@ -76,6 +76,8 @@ class Settings {
this.musicVolume = 50 this.musicVolume = 50
this.sfxVolume = 50 this.sfxVolume = 50
this.theme = "Plasma"
} }
} }

176
jsm/TetraGUI.js
View File

@ -4,9 +4,86 @@ import * as FPS from 'three/addons/libs/stats.module.js'
import { Mino, environnement } from './gamelogic.js' import { Mino, environnement } from './gamelogic.js'
let jsKeyRenamer = new Proxy({
["←"]: "ArrowLeft",
["→"]: "ArrowRight",
["↑"]: "ArrowUp",
["↓"]: "ArrowDown",
["Espace"]: " ",
["Échap."]: "Escape",
["Ret. arrière"]: "Backspace",
["Entrée"]: "Enter",
}, {
get(obj, keyName) {
return keyName in obj ? obj[keyName] : keyName
}
})
let friendyKeyRenamer = new Proxy({
["ArrowLeft"]: "←",
["ArrowRight"]: "→",
["ArrowUp"]: "↑",
["ArrowDown"]: "↓",
[" "]: "Espace",
["Escape"]: "Échap.",
["Backspace"]: "Ret. arrière",
["Enter"]: "Entrée",
}, {
get(obj, keyName) {
return keyName in obj ? obj[keyName] : keyName.toUpperCase()
}
})
export class TetraGUI extends GUI { export class TetraGUI extends GUI {
constructor(game, settings, stats, scene, controls) { constructor(game, settings, stats, scene, controls) {
super({title: "teTra"}) super({title: "teTra"})
this.startLevel = 1
let keyMaps = {
key: {},
action: {}
}
this.key = new Proxy(keyMaps, {
set(km, action, key) {
key = jsKeyRenamer[key]
km.action[key.toLowerCase()] = action
return km.key[action] = key
},
has(km, action) {
return action in km.key
},
get(km, action) {
return friendyKeyRenamer[km.key[action]]
}
})
this.action = new Proxy(keyMaps, {
set(km, key, action) {
km.key[action] = key
return km.action[key.toLowerCase()] = action
},
has(km, key) {
return key.toLowerCase() in km.action
},
get(km, key) {
return km.action[key.toLowerCase()]
}
})
this.key.moveLeft = "ArrowLeft"
this.key.moveRight = "ArrowRight"
this.key.rotateCCW = "w"
this.key.rotateCW = "ArrowUp"
this.key.softDrop = "ArrowDown"
this.key.hardDrop = " "
this.key.hold = "c"
this.key.pause = "Escape"
this.arrDelay = 50
this.dasDelay = 300
this.musicVolume = 50
this.sfxVolume = 50
this.startButton = this.add(game, "start").name("Jouer").hide() this.startButton = this.add(game, "start").name("Jouer").hide()
this.pauseButton = this.add(game, "pause").name("Pause").hide() this.pauseButton = this.add(game, "pause").name("Pause").hide()
@ -27,71 +104,24 @@ export class TetraGUI extends GUI {
this.settings = this.addFolder("Options").open() this.settings = this.addFolder("Options").open()
this.settings.add(settings, "startLevel").name("Niveau initial").min(1).max(15).step(1) this.settings.add(settings, "startLevel").name("Niveau initial").min(1).max(15).step(1)
this.settings.add(scene.vortex, "background", ["Plasma", "Espace"]).name("Fond").onChange(background => { this.settings.add(settings, "theme", ["Plasma", "Espace"]).name("Thème").onChange(theme => {
const loadingManager = new THREE.LoadingManager() scene.vortex.theme = theme
let darkTexture, colorfullTexture switch (theme) {
switch (background) {
case "Plasma": case "Plasma":
darkTexture = new THREE.TextureLoader(loadingManager).load("./images/plasma.jpg", texture => { scene.ambientLight.intensity = 0.6
texture.wrapS = THREE.RepeatWrapping scene.directionalLight.intensity = 5
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(1, 1) Mino.mesh.material.opacity = 0.7
}) Mino.mesh.material.roughness = 0.48
colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/plasma2.jpg", texture => { Mino.mesh.material.metalness = 0.9
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 1)
})
loadingManager.onLoad = function() {
scene.vortex.darkCylinder.material.map = darkTexture
scene.vortex.darkCylinder.material.opacity = 0.17
scene.vortex.colorFullCylinder.material.map = colorfullTexture
scene.vortex.colorFullCylinder.material.opacity = 0.7
scene.vortex.globalRotation = 0.028
scene.vortex.darkTextureRotation = 0.005
scene.vortex.darkMoveForward = 0.009
scene.vortex.colorFullTextureRotation = 0.006
scene.vortex.colorFullMoveForward = 0.025
scene.ambientLight.intensity = 0.6
scene.directionalLight.intensity = 5
Mino.mesh.material.opacity = 0.7
Mino.mesh.material.roughness = 0.48
Mino.mesh.material.metalness = 0.9
}
break break
case "Espace": case "Espace":
darkTexture = new THREE.TextureLoader(loadingManager).load("./images/dark.jpg", texture => { scene.ambientLight.intensity = 20
texture.wrapS = THREE.RepeatWrapping scene.directionalLight.intensity = 10
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 2) Mino.mesh.material.opacity = 0.6
}) Mino.mesh.material.roughness = 0.05
colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => { Mino.mesh.material.metalness = 0.997
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 2)
})
loadingManager.onLoad = function() {
scene.vortex.darkCylinder.material.map = darkTexture
scene.vortex.darkCylinder.material.opacity = 0.05
scene.vortex.colorFullCylinder.material.map = colorfullTexture
scene.vortex.colorFullCylinder.material.opacity = 0.25
scene.vortex.globalRotation = 0.028
scene.vortex.darkTextureRotation = 0.006
scene.vortex.darkMoveForward = 0.03
scene.vortex.colorFullTextureRotation = 0.006
scene.vortex.colorFullMoveForward = 0.012
scene.ambientLight.intensity = 20
scene.directionalLight.intensity = 10
//Mino.mesh.material.opacity = 0.6
//Mino.mesh.material.roughness = 0.08
//Mino.mesh.material.metalness = 0.98
}
break break
} }
}) })
@ -193,17 +223,17 @@ export class TetraGUI extends GUI {
}) })
break break
} }
if ("opacity" in Mino.mesh.material) material.add(Mino.mesh.material, "opacity").min(0).max(1) if ("opacity" in Mino.mesh.material) material.add(Mino.mesh.material, "opacity" ).min(0).max(1).listen()
if ("reflectivity" in Mino.mesh.material) material.add(Mino.mesh.material, "reflectivity").min(0).max(1) if ("reflectivity" in Mino.mesh.material) material.add(Mino.mesh.material, "reflectivity" ).min(0).max(1).listen()
if ("roughness" in Mino.mesh.material) material.add(Mino.mesh.material, "roughness").min(0).max(1) if ("roughness" in Mino.mesh.material) material.add(Mino.mesh.material, "roughness" ).min(0).max(1).listen()
if ("metalness" in Mino.mesh.material) material.add(Mino.mesh.material, "metalness").min(0).max(1) if ("metalness" in Mino.mesh.material) material.add(Mino.mesh.material, "metalness" ).min(0).max(1).listen()
if ("attenuationDistance" in Mino.mesh.material) material.add(Mino.mesh.material, "attenuationDistance").min(0) if ("attenuationDistance" in Mino.mesh.material) material.add(Mino.mesh.material, "attenuationDistance").min(0).listen()
if ("ior" in Mino.mesh.material) material.add(Mino.mesh.material, "ior").min(1).max(2) if ("ior" in Mino.mesh.material) material.add(Mino.mesh.material, "ior" ).min(1).max(2).listen()
if ("sheen" in Mino.mesh.material) material.add(Mino.mesh.material, "sheen").min(0).max(1) if ("sheen" in Mino.mesh.material) material.add(Mino.mesh.material, "sheen" ).min(0).max(1).listen()
if ("sheenRoughness" in Mino.mesh.material) material.add(Mino.mesh.material, "sheenRoughness").min(0).max(1) if ("sheenRoughness" in Mino.mesh.material) material.add(Mino.mesh.material, "sheenRoughness" ).min(0).max(1).listen()
if ("specularIntensity" in Mino.mesh.material) material.add(Mino.mesh.material, "specularIntensity").min(0).max(1) if ("specularIntensity" in Mino.mesh.material) material.add(Mino.mesh.material, "specularIntensity" ).min(0).max(1).listen()
if ("thickness" in Mino.mesh.material) material.add(Mino.mesh.material, "thickness").min(0).max(5) if ("thickness" in Mino.mesh.material) material.add(Mino.mesh.material, "thickness" ).min(0).max(5).listen()
if ("transmission" in Mino.mesh.material) material.add(Mino.mesh.material, "transmission").min(0).max(1) if ("transmission" in Mino.mesh.material) material.add(Mino.mesh.material, "transmission" ).min(0).max(1).listen()
} }
changeMaterial(this.materialType) changeMaterial(this.materialType)
material.close() material.close()

4
jsm/TetraScene.js
View File

@ -30,17 +30,17 @@ export class TetraScene extends THREE.Scene {
this.lineClearSound = new THREE.Audio(listener) this.lineClearSound = new THREE.Audio(listener)
audioLoader.load('audio/line-clear.ogg', function( buffer ) { audioLoader.load('audio/line-clear.ogg', function( buffer ) {
this.lineClearSound.setBuffer(buffer) this.lineClearSound.setBuffer(buffer)
this.lineClearSound.setVolume(settings.sfxVolume/100)
}.bind(this)) }.bind(this))
this.tetrisSound = new THREE.Audio(listener) this.tetrisSound = new THREE.Audio(listener)
audioLoader.load('audio/tetris.ogg', function( buffer ) { audioLoader.load('audio/tetris.ogg', function( buffer ) {
this.tetrisSound.setBuffer(buffer) this.tetrisSound.setBuffer(buffer)
this.lineClearSound.setVolume(settings.sfxVolume/100)
this.tetrisSound.setVolume(settings.sfxVolume/100) this.tetrisSound.setVolume(settings.sfxVolume/100)
this.hardDropSound.setVolume(settings.sfxVolume/100)
}.bind(this)) }.bind(this))
this.hardDropSound = new THREE.Audio(listener) this.hardDropSound = new THREE.Audio(listener)
audioLoader.load('audio/hard-drop.wav', function( buffer ) { audioLoader.load('audio/hard-drop.wav', function( buffer ) {
this.hardDropSound.setBuffer(buffer) this.hardDropSound.setBuffer(buffer)
this.hardDropSound.setVolume(settings.sfxVolume/100)
}.bind(this)) }.bind(this))
} }

68
jsm/Vortex.js
View File

@ -5,6 +5,8 @@ export class Vortex extends THREE.Group {
constructor(loadingManager) { constructor(loadingManager) {
super() super()
this.loadingManager = loadingManager
this.globalRotation = 0.028 this.globalRotation = 0.028
this.darkTextureRotation = 0.006 this.darkTextureRotation = 0.006
@ -14,20 +16,12 @@ export class Vortex extends THREE.Group {
this.colorFullMoveForward = 0.025 this.colorFullMoveForward = 0.025
const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 500, 12, 1, true) const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 500, 12, 1, true)
this.background = "Plasma"
this.darkCylinder = new THREE.Mesh( this.darkCylinder = new THREE.Mesh(
commonCylinderGeometry, commonCylinderGeometry,
new THREE.MeshLambertMaterial({ new THREE.MeshLambertMaterial({
side: THREE.BackSide, side: THREE.BackSide,
map: new THREE.TextureLoader(loadingManager).load("./images/plasma.jpg", (texture) => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(1, 1)
}),
blending: THREE.AdditiveBlending, blending: THREE.AdditiveBlending,
opacity: 0.17
}) })
) )
this.add(this.darkCylinder) this.add(this.darkCylinder)
@ -36,13 +30,7 @@ export class Vortex extends THREE.Group {
commonCylinderGeometry, commonCylinderGeometry,
new THREE.MeshBasicMaterial({ new THREE.MeshBasicMaterial({
side: THREE.BackSide, side: THREE.BackSide,
map: new THREE.TextureLoader(loadingManager).load("./images/plasma2.jpg", (texture) => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 1)
}),
blending: THREE.AdditiveBlending, blending: THREE.AdditiveBlending,
opacity: 0.7
}) })
) )
this.add(this.colorFullCylinder) this.add(this.colorFullCylinder)
@ -50,6 +38,58 @@ export class Vortex extends THREE.Group {
this.position.set(5, 10, -10) this.position.set(5, 10, -10)
} }
set theme(theme) {
switch (theme) {
case "Plasma":
new THREE.TextureLoader(this.loadingManager).load("./images/plasma.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(1, 1)
this.darkCylinder.material.map = texture
})
this.darkCylinder.material.opacity = 0.17
new THREE.TextureLoader(this.loadingManager).load("./images/plasma2.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 1)
this.colorFullCylinder.material.map = texture
})
this.colorFullCylinder.material.opacity = 0.7
this.globalRotation = 0.028
this.darkTextureRotation = 0.005
this.darkMoveForward = 0.009
this.colorFullTextureRotation = 0.006
this.colorFullMoveForward = 0.025
break
case "Espace":
new THREE.TextureLoader(this.loadingManager).load("./images/dark.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 2)
this.darkCylinder.material.map = texture
})
this.darkCylinder.material.opacity = 0.05
new THREE.TextureLoader(this.loadingManager).load("./images/colorfull.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(2, 2)
this.colorFullCylinder.material.map = texture
})
this.colorFullCylinder.material.opacity = 0.34
this.globalRotation = 0.028
this.darkTextureRotation = 0.006
this.darkMoveForward = 0.03
this.colorFullTextureRotation = 0.006
this.colorFullMoveForward = 0.012
break
}
}
update(delta) { update(delta) {
this.rotation.y += this.globalRotation * delta this.rotation.y += this.globalRotation * delta