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

material debug: fps :((

Browse Source
This commit is contained in:
Adrien MALINGREY 2023-07-11 21:37:35 +02:00
parent 8279b1188f
commit 69b2b77fe9
5 changed files with 133 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.js
View File

@ -43,7 +43,6 @@ let game = {
renderer.domElement.tabIndex = 1 renderer.domElement.tabIndex = 1
gui.domElement.tabIndex = 1 gui.domElement.tabIndex = 1
gui.domElement.onfocus = game.pause
nextQueue.init() nextQueue.init()
@ -55,7 +54,7 @@ let game = {
document.onkeydown = onkeydown document.onkeydown = onkeydown
document.onkeyup = onkeyup document.onkeyup = onkeyup
window.onblur = game.pause window.onblur = game.pause
gui.domElement.onfocus = game.pause if (!gui.debug) gui.domElement.onfocus = game.pause
document.body.classList.remove("pause") document.body.classList.remove("pause")
gui.resumeButton.hide() gui.resumeButton.hide()

BIN
audio/Tetris_T-Spin_OC_ReMix.mp3 Normal file
View File

Binary file not shown.

143
jsm/TetraGUI.js
View File

@ -1,7 +1,7 @@
import * as THREE from 'three' import * as THREE from 'three'
import { GUI } from 'three/addons/libs/lil-gui.module.min.js' import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
import * as FPS from 'three/addons/libs/stats.module.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 { class TetraGUI extends GUI {
@ -126,32 +126,145 @@ class TetraGUI extends GUI {
scene.hardDropSound.setVolume(volume/100) 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") 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, "x")
cameraPosition.add(scene.camera.position, "y") cameraPosition.add(scene.camera.position, "y")
cameraPosition.add(scene.camera.position, "z") 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, "x")
directionalLightPosition.add(scene.directionalLight.position, "y") directionalLightPosition.add(scene.directionalLight.position, "y")
directionalLightPosition.add(scene.directionalLight.position, "z") 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.ambientLight, "intensity").name("ambient").min(0).max(20)
light.add(scene.directionalLight, "intensity").name("directional").min(0).max(20) light.add(scene.directionalLight, "intensity").name("directional").min(0).max(20)
let materials = this.debug.addFolder("materials opacity") let vortex = this.debug.addFolder("vortex opacity").close()
materials.add(scene.vortex.darkCylinder.material, "opacity").name("dark").min(0).max(1) vortex.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) vortex.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 let materialParams = {
L.prototype.material.reflectivity = I.prototype.material.reflectivity type: "MeshBasicMaterial",
O.prototype.material.reflectivity = I.prototype.material.reflectivity opacity: 0.95,
S.prototype.material.reflectivity = I.prototype.material.reflectivity reflectivity: 0.8,
T.prototype.material.reflectivity = I.prototype.material.reflectivity roughness: 0.1,
Z.prototype.material.reflectivity = I.prototype.material.reflectivity 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() this.fps = new FPS.default()

4
jsm/TetraScene.js
View File

@ -16,7 +16,7 @@ class TetraScene extends THREE.Scene {
this.add(this.ambientLight) this.add(this.ambientLight)
this.directionalLight = new THREE.DirectionalLight(0xffffff, 20) 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) this.add(this.directionalLight)
@ -27,7 +27,7 @@ class TetraScene extends THREE.Scene {
const audioLoader = new THREE.AudioLoader(loadingManager) const audioLoader = new THREE.AudioLoader(loadingManager)
this.music = new THREE.Audio(listener) 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.setBuffer(buffer)
this.music.setLoop(true) this.music.setLoop(true)
this.music.setVolume(settings.musicVolume/100) this.music.setVolume(settings.musicVolume/100)

4
jsm/gamelogic.js
View File

@ -89,7 +89,7 @@ class MinoMaterial extends THREE.MeshBasicMaterial {
super({ super({
color: color, color: color,
envMap: environnement, envMap: environnement,
reflectivity: 0.95, reflectivity: 0.9,
transparent: true, transparent: true,
opacity: 0.95, opacity: 0.95,
side: THREE.DoubleSide, 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)] 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 } export { T_SPIN, FACING, TRANSLATION, ROTATION, COLORS, environnement, Tetromino, I, J, L, O, S, T, Z, Matrix, HoldQueue, NextQueue }