diff --git a/images/colorfull.jpg b/images/colorfull.jpg new file mode 100644 index 0000000..b917cf0 Binary files /dev/null and b/images/colorfull.jpg differ diff --git a/images/dark.jpg b/images/dark.jpg new file mode 100644 index 0000000..cfd5438 Binary files /dev/null and b/images/dark.jpg differ diff --git a/jsm/TetraGUI.js b/jsm/TetraGUI.js index d2b304f..621fe04 100644 --- a/jsm/TetraGUI.js +++ b/jsm/TetraGUI.js @@ -1,3 +1,4 @@ +import * as THREE from 'three' import { GUI } from 'three/addons/libs/lil-gui.module.min.js' import * as FPS from 'three/addons/libs/stats.module.js' import { I, J, L, O, S, T, Z } from './gamelogic.js' @@ -27,6 +28,52 @@ 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) { + 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.1 + scene.vortex.colorFullCylinder.material.map = colorfullTexture + scene.vortex.colorFullCylinder.material.opacity = 0.6 + } + scene.ambientLight.intensity = 2 + scene.directionalLight.intensity = 3 + break + case "Espace": + darkTexture = new THREE.TextureLoader(loadingManager).load("./images/dark.jpg", texture => { + texture.wrapS = THREE.RepeatWrapping + texture.wrapT = THREE.MirroredRepeatWrapping + texture.repeat.set(1, 1) + }) + colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => { + texture.wrapS = THREE.RepeatWrapping + texture.wrapT = THREE.MirroredRepeatWrapping + texture.repeat.set(1, 1) + }) + loadingManager.onLoad = function() { + scene.vortex.darkCylinder.material.map = darkTexture + scene.vortex.darkCylinder.material.opacity = 0.2 + scene.vortex.colorFullCylinder.material.map = colorfullTexture + scene.vortex.colorFullCylinder.material.opacity = 0.2 + scene.ambientLight.intensity = 2 + scene.directionalLight.intensity = 3 + } + break + } + }) this.settings.key = this.settings.addFolder("Commandes").open() let moveLeftKeyController = this.settings.key.add(settings.key, "moveLeft").name('Gauche') @@ -51,7 +98,7 @@ class TetraGUI extends GUI { this.settings.delay.add(settings,"dasDelay").name("DAS (ms)").min(100).max(500).step(5); this.settings.volume = this.settings.addFolder("Volume").open() - this.settings.volume.add(settings,"musicVolume").name("Musique").min(0).max(100).step(1).onChange((volume) => { + this.settings.volume.add(settings,"musicVolume").name("Musique").min(0).max(100).step(1).onChange(volume => { if (volume) { scene.music.setVolume(volume/100) if (game.playing) scene.music.play() @@ -59,7 +106,7 @@ class TetraGUI extends GUI { scene.music.pause() } }) - this.settings.volume.add(settings,"sfxVolume").name("Effets").min(0).max(100).step(1).onChange((volume) => { + this.settings.volume.add(settings,"sfxVolume").name("Effets").min(0).max(100).step(1).onChange(volume => { scene.lineClearSound.setVolume(volume/100) scene.tetrisSound.setVolume(volume/100) scene.hardDropSound.setVolume(volume/100) diff --git a/jsm/Vortex.js b/jsm/Vortex.js index bff5e62..96c86a3 100644 --- a/jsm/Vortex.js +++ b/jsm/Vortex.js @@ -15,12 +15,14 @@ class Vortex extends THREE.Group { super() 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) => { + map: new THREE.TextureLoader(loadingManager).load("./images/plasma.jpg", (texture) => { texture.wrapS = THREE.RepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping texture.repeat.set(1, 1) @@ -36,7 +38,7 @@ class Vortex extends THREE.Group { commonCylinderGeometry, new THREE.MeshBasicMaterial({ side: THREE.BackSide, - map: new THREE.TextureLoader(loadingManager).load("images/plasma2.jpg", (texture) => { + map: new THREE.TextureLoader(loadingManager).load("./images/plasma2.jpg", (texture) => { texture.wrapS = THREE.RepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping texture.repeat.set(2, 1)