diff --git a/app.js b/app.js index c4cb2b4..eeb7460 100644 --- a/app.js +++ b/app.js @@ -43,7 +43,6 @@ let game = { renderer.domElement.tabIndex = 1 gui.domElement.tabIndex = 1 - gui.domElement.onfocus = game.pause nextQueue.init() @@ -55,7 +54,7 @@ let game = { document.onkeydown = onkeydown document.onkeyup = onkeyup window.onblur = game.pause - gui.domElement.onfocus = game.pause + if (!gui.debug) gui.domElement.onfocus = game.pause document.body.classList.remove("pause") gui.resumeButton.hide() diff --git a/audio/Tetris_T-Spin_OC_ReMix.mp3 b/audio/Tetris_T-Spin_OC_ReMix.mp3 new file mode 100644 index 0000000..1dc5da1 Binary files /dev/null and b/audio/Tetris_T-Spin_OC_ReMix.mp3 differ diff --git a/jsm/TetraGUI.js b/jsm/TetraGUI.js index beb30f4..40ec2eb 100644 --- a/jsm/TetraGUI.js +++ b/jsm/TetraGUI.js @@ -1,7 +1,7 @@ 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' +import { COLORS, environnement, I, J, L, O, S, T, Z } from './gamelogic.js' class TetraGUI extends GUI { @@ -126,32 +126,145 @@ class TetraGUI extends GUI { scene.hardDropSound.setVolume(volume/100) }) - if (window.location.search.includes("debug")) { + this.debug = window.location.search.includes("debug") + if (this.debug) { this.debug = this.addFolder("debug") - let cameraPosition = this.debug.addFolder("camera.position") + let cameraPosition = this.debug.addFolder("camera.position").close() cameraPosition.add(scene.camera.position, "x") cameraPosition.add(scene.camera.position, "y") cameraPosition.add(scene.camera.position, "z") - let directionalLightPosition = this.debug.addFolder("directionalLight.position") + let directionalLightPosition = this.debug.addFolder("directionalLight.position").close() directionalLightPosition.add(scene.directionalLight.position, "x") directionalLightPosition.add(scene.directionalLight.position, "y") directionalLightPosition.add(scene.directionalLight.position, "z") - let light = this.debug.addFolder("lights intensity") + let light = this.debug.addFolder("lights intensity").close() light.add(scene.ambientLight, "intensity").name("ambient").min(0).max(20) light.add(scene.directionalLight, "intensity").name("directional").min(0).max(20) - let materials = this.debug.addFolder("materials opacity") - materials.add(scene.vortex.darkCylinder.material, "opacity").name("dark").min(0).max(1) - materials.add(scene.vortex.colorFullCylinder.material, "opacity").name("colorFull").min(0).max(1) - materials.add(I.prototype.material, "reflectivity").min(0).max(2).onChange(() => { - J.prototype.material.reflectivity = I.prototype.material.reflectivity - L.prototype.material.reflectivity = I.prototype.material.reflectivity - O.prototype.material.reflectivity = I.prototype.material.reflectivity - S.prototype.material.reflectivity = I.prototype.material.reflectivity - T.prototype.material.reflectivity = I.prototype.material.reflectivity - Z.prototype.material.reflectivity = I.prototype.material.reflectivity + let vortex = this.debug.addFolder("vortex opacity").close() + vortex.add(scene.vortex.darkCylinder.material, "opacity").name("dark").min(0).max(1) + vortex.add(scene.vortex.colorFullCylinder.material, "opacity").name("colorFull").min(0).max(1) + + let materialParams = { + type: "MeshBasicMaterial", + opacity: 0.95, + reflectivity: 0.8, + roughness: 0.1, + metalness: 0.5, + attenuationDistance: 0.5, + ior: 2, + sheen: 0, + sheenRoughness: 1, + specularIntensity: 1, + thickness: 5, + transmission: 1, + } + let material = this.debug.addFolder("minoes material").close() + let type = material.add(materialParams, "type", ["MeshBasicMaterial", "MeshStandardMaterial", "MeshPhysicalMaterial"]) + let opacity = material.add(materialParams, "opacity").min(0).max(1) + let reflectivity = material.add(materialParams, "reflectivity").min(0).max(1) + let roughness = material.add(materialParams, "roughness").min(0).max(1).hide() + let metalness = material.add(materialParams, "metalness").min(0).max(1).hide() + let attenuationDistance = material.add(materialParams, "attenuationDistance").min(0).max(1).hide() + let ior = material.add(materialParams, "ior").min(1).max(2).hide() + let sheen = material.add(materialParams, "sheen").min(0).max(1).hide() + let sheenRoughness = material.add(materialParams, "sheenRoughness").min(0).max(1).hide() + let specularIntensity = material.add(materialParams, "specularIntensity").min(0).max(1).hide() + let thickness = material.add(materialParams, "thickness").min(0).max(5).hide() + let transmission = material.add(materialParams, "transmission").min(0).max(1).hide() + type.onChange(type => { + switch(type) { + case "MeshBasicMaterial": + reflectivity.show() + roughness.hide() + metalness.hide() + attenuationDistance.hide() + ior.hide() + sheen.hide() + sheenRoughness.hide() + specularIntensity.hide() + thickness.hide() + transmission.hide() + break + case "MeshStandardMaterial": + reflectivity.hide() + roughness.show() + metalness.show() + attenuationDistance.hide() + ior.hide() + sheen.hide() + sheenRoughness.hide() + specularIntensity.hide() + thickness.hide() + transmission.hide() + break + case "MeshPhysicalMaterial": + reflectivity.hide() + roughness.show() + metalness.show() + attenuationDistance.show() + ior.show() + sheen.show() + sheenRoughness.show() + specularIntensity.show() + thickness.show() + transmission.show() + break + } + }) + material.onChange(() => { + let minoMaterialFactory + switch(materialParams.type) { + case "MeshBasicMaterial": + minoMaterialFactory = color => new THREE.MeshBasicMaterial({ + color : color, + envMap : environnement, + reflectivity: materialParams.reflectivity, + transparent : true, + opacity : materialParams.opacity, + side : THREE.DoubleSide, + }) + break + case "MeshStandardMaterial": + minoMaterialFactory = color => new THREE.MeshStandardMaterial({ + color : color, + envMap : environnement, + transparent: true, + opacity : materialParams.opacity, + side : THREE.DoubleSide, + roughness : materialParams.roughness, + metalness : materialParams.metalness, + }) + break + case "MeshPhysicalMaterial": + minoMaterialFactory = color => new THREE.MeshStandardMaterial({ + color : "white", + envMap : environnement, + transparent : true, + opacity : materialParams.opacity, + side : THREE.DoubleSide, + roughness : materialParams.roughness, + metalness : materialParams.metalness, + attenuationColor : color, + attenuationDistance: materialParams.attenuationDistance, + ior : materialParams.ior, + sheen : materialParams.sheen, + sheenRoughness : materialParams.sheenRoughness, + specularIntensity : materialParams.specularIntensity, + thickness : materialParams.thickness, + transmission : materialParams.transmission, + }) + break + } + I.prototype.material = minoMaterialFactory(COLORS.I) + J.prototype.material = minoMaterialFactory(COLORS.J) + L.prototype.material = minoMaterialFactory(COLORS.L) + O.prototype.material = minoMaterialFactory(COLORS.O) + S.prototype.material = minoMaterialFactory(COLORS.S) + T.prototype.material = minoMaterialFactory(COLORS.T) + Z.prototype.material = minoMaterialFactory(COLORS.Z) }) this.fps = new FPS.default() diff --git a/jsm/TetraScene.js b/jsm/TetraScene.js index ff7afab..e684522 100644 --- a/jsm/TetraScene.js +++ b/jsm/TetraScene.js @@ -16,7 +16,7 @@ class TetraScene extends THREE.Scene { this.add(this.ambientLight) this.directionalLight = new THREE.DirectionalLight(0xffffff, 20) - this.directionalLight.position.set(5, 100, -10) + this.directionalLight.position.set(5, -9, -20) this.add(this.directionalLight) @@ -27,7 +27,7 @@ class TetraScene extends THREE.Scene { const audioLoader = new THREE.AudioLoader(loadingManager) this.music = new THREE.Audio(listener) - audioLoader.load('audio/Tetris_CheDDer_OC_ReMix.mp3', function( buffer ) { + audioLoader.load('audio/Tetris_T-Spin_OC_ReMix.mp3', function( buffer ) { this.music.setBuffer(buffer) this.music.setLoop(true) this.music.setVolume(settings.musicVolume/100) diff --git a/jsm/gamelogic.js b/jsm/gamelogic.js index afdd26f..4c9d375 100644 --- a/jsm/gamelogic.js +++ b/jsm/gamelogic.js @@ -89,7 +89,7 @@ class MinoMaterial extends THREE.MeshBasicMaterial { super({ color: color, envMap: environnement, - reflectivity: 0.95, + reflectivity: 0.9, transparent: true, opacity: 0.95, side: THREE.DoubleSide, @@ -499,4 +499,4 @@ class NextQueue extends THREE.Group { NextQueue.prototype.positions = [P(0, 0), P(0, -3), P(0, -6), P(0, -9), P(0, -12), P(0, -15), P(0, -18)] -export { T_SPIN, FACING, TRANSLATION, ROTATION, environnement, Tetromino, I, J, L, O, S, T, Z, Matrix, HoldQueue, NextQueue } \ No newline at end of file +export { T_SPIN, FACING, TRANSLATION, ROTATION, COLORS, environnement, Tetromino, I, J, L, O, S, T, Z, Matrix, HoldQueue, NextQueue } \ No newline at end of file