From 8ed998f25529fef7e3c1ceb5cd845db20d64b63c Mon Sep 17 00:00:00 2001 From: adrien Date: Wed, 25 Sep 2024 15:24:28 +0200 Subject: [PATCH] upatre --- app.js | 9 +-- jsm/Settings.js | 2 + jsm/TetraGUI.js | 176 +++++++++++++++++++++++++++------------------- jsm/TetraScene.js | 4 +- jsm/Vortex.js | 68 ++++++++++++++---- 5 files changed, 164 insertions(+), 95 deletions(-) diff --git a/app.js b/app.js index 3f2ac33..1b845f9 100644 --- a/app.js +++ b/app.js @@ -276,9 +276,9 @@ renderer.toneMapping = THREE.ACESFilmicToneMapping document.body.appendChild(renderer.domElement) renderer.domElement.tabIndex = 1 -const loadingManager = new THREE.LoadingManager( +let loadingManager = new THREE.LoadingManager( function() { - loaddingCircle.remove() + loaddingCircle.style.display = "none" gui.startButton.show() renderer.setAnimationLoop(animate) }, @@ -291,15 +291,13 @@ const loadingManager = new THREE.LoadingManager( ) loadingManager.onStart = function (url, itemsLoaded, itemsTotal) { loadingPercent.innerText = "0%" + loaddingCircle.style.display = "block" } const stats = new Stats() const settings = new Settings() - const scene = new TetraScene(settings, loadingManager) - const controls = new TetraControls(scene.camera, renderer.domElement) - const gui = new TetraGUI(game, settings, stats, scene, controls) scene.add(Mino.mesh) @@ -319,7 +317,6 @@ messagesSpan.onanimationend = function (event) { const clock = new THREE.Clock() function animate() { - const delta = clock.getDelta() scene.updateMatrixWorld() scene.update(delta) diff --git a/jsm/Settings.js b/jsm/Settings.js index 182245f..066c923 100644 --- a/jsm/Settings.js +++ b/jsm/Settings.js @@ -76,6 +76,8 @@ class Settings { this.musicVolume = 50 this.sfxVolume = 50 + + this.theme = "Plasma" } } diff --git a/jsm/TetraGUI.js b/jsm/TetraGUI.js index 4d872ba..ba735b0 100644 --- a/jsm/TetraGUI.js +++ b/jsm/TetraGUI.js @@ -4,9 +4,86 @@ import * as FPS from 'three/addons/libs/stats.module.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 { constructor(game, settings, stats, scene, controls) { 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.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.add(settings, "startLevel").name("Niveau initial").min(1).max(15).step(1) - this.settings.add(scene.vortex, "background", ["Plasma", "Espace"]).name("Fond").onChange(background => { - const loadingManager = new THREE.LoadingManager() - let darkTexture, colorfullTexture - switch (background) { + this.settings.add(settings, "theme", ["Plasma", "Espace"]).name("Thème").onChange(theme => { + scene.vortex.theme = theme + switch (theme) { case "Plasma": - darkTexture = new THREE.TextureLoader(loadingManager).load("./images/plasma.jpg", texture => { - texture.wrapS = THREE.RepeatWrapping - texture.wrapT = THREE.MirroredRepeatWrapping - texture.repeat.set(1, 1) - }) - colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/plasma2.jpg", texture => { - 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 - } + 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 case "Espace": - darkTexture = new THREE.TextureLoader(loadingManager).load("./images/dark.jpg", texture => { - texture.wrapS = THREE.RepeatWrapping - texture.wrapT = THREE.MirroredRepeatWrapping - texture.repeat.set(2, 2) - }) - colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => { - 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 - } + scene.ambientLight.intensity = 20 + scene.directionalLight.intensity = 10 + + Mino.mesh.material.opacity = 0.6 + Mino.mesh.material.roughness = 0.05 + Mino.mesh.material.metalness = 0.997 break } }) @@ -193,17 +223,17 @@ export class TetraGUI extends GUI { }) break } - if ("opacity" in Mino.mesh.material) material.add(Mino.mesh.material, "opacity").min(0).max(1) - if ("reflectivity" in Mino.mesh.material) material.add(Mino.mesh.material, "reflectivity").min(0).max(1) - if ("roughness" in Mino.mesh.material) material.add(Mino.mesh.material, "roughness").min(0).max(1) - if ("metalness" in Mino.mesh.material) material.add(Mino.mesh.material, "metalness").min(0).max(1) - if ("attenuationDistance" in Mino.mesh.material) material.add(Mino.mesh.material, "attenuationDistance").min(0) - if ("ior" in Mino.mesh.material) material.add(Mino.mesh.material, "ior").min(1).max(2) - if ("sheen" in Mino.mesh.material) material.add(Mino.mesh.material, "sheen").min(0).max(1) - if ("sheenRoughness" in Mino.mesh.material) material.add(Mino.mesh.material, "sheenRoughness").min(0).max(1) - if ("specularIntensity" in Mino.mesh.material) material.add(Mino.mesh.material, "specularIntensity").min(0).max(1) - if ("thickness" in Mino.mesh.material) material.add(Mino.mesh.material, "thickness").min(0).max(5) - if ("transmission" in Mino.mesh.material) material.add(Mino.mesh.material, "transmission").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).listen() + 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).listen() + 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).listen() + 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).listen() + 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).listen() + if ("transmission" in Mino.mesh.material) material.add(Mino.mesh.material, "transmission" ).min(0).max(1).listen() } changeMaterial(this.materialType) material.close() diff --git a/jsm/TetraScene.js b/jsm/TetraScene.js index 805e045..1fc618b 100644 --- a/jsm/TetraScene.js +++ b/jsm/TetraScene.js @@ -30,17 +30,17 @@ export class TetraScene extends THREE.Scene { this.lineClearSound = new THREE.Audio(listener) audioLoader.load('audio/line-clear.ogg', function( buffer ) { this.lineClearSound.setBuffer(buffer) - this.lineClearSound.setVolume(settings.sfxVolume/100) }.bind(this)) this.tetrisSound = new THREE.Audio(listener) audioLoader.load('audio/tetris.ogg', function( buffer ) { this.tetrisSound.setBuffer(buffer) + this.lineClearSound.setVolume(settings.sfxVolume/100) this.tetrisSound.setVolume(settings.sfxVolume/100) + this.hardDropSound.setVolume(settings.sfxVolume/100) }.bind(this)) this.hardDropSound = new THREE.Audio(listener) audioLoader.load('audio/hard-drop.wav', function( buffer ) { this.hardDropSound.setBuffer(buffer) - this.hardDropSound.setVolume(settings.sfxVolume/100) }.bind(this)) } diff --git a/jsm/Vortex.js b/jsm/Vortex.js index ad12f35..365ef55 100644 --- a/jsm/Vortex.js +++ b/jsm/Vortex.js @@ -5,6 +5,8 @@ export class Vortex extends THREE.Group { constructor(loadingManager) { super() + this.loadingManager = loadingManager + this.globalRotation = 0.028 this.darkTextureRotation = 0.006 @@ -14,20 +16,12 @@ export class Vortex extends THREE.Group { this.colorFullMoveForward = 0.025 const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 500, 12, 1, true) - - this.background = "Plasma" this.darkCylinder = new THREE.Mesh( commonCylinderGeometry, new THREE.MeshLambertMaterial({ 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, - opacity: 0.17 }) ) this.add(this.darkCylinder) @@ -36,13 +30,7 @@ export class Vortex extends THREE.Group { commonCylinderGeometry, new THREE.MeshBasicMaterial({ 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, - opacity: 0.7 }) ) this.add(this.colorFullCylinder) @@ -50,6 +38,58 @@ export class Vortex extends THREE.Group { 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) { this.rotation.y += this.globalRotation * delta