material type in debug

This commit is contained in:
Adrien MALINGREY 2023-07-18 03:26:12 +02:00
parent 12fb307041
commit 85237739bc
3 changed files with 69 additions and 46 deletions

View File

@ -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 { Mino } from './gamelogic.js'
import { Mino, environnement } from './gamelogic.js'
export class TetraGUI extends GUI {
@ -45,9 +45,9 @@ export class TetraGUI extends GUI {
})
loadingManager.onLoad = function() {
scene.vortex.darkCylinder.material.map = darkTexture
scene.vortex.darkCylinder.material.opacity = 0.035
scene.vortex.darkCylinder.material.opacity = 0.006
scene.vortex.colorFullCylinder.material.map = colorfullTexture
scene.vortex.colorFullCylinder.material.opacity = 0.6
scene.vortex.colorFullCylinder.material.opacity = 0.7
scene.vortex.globalRotation = 0.028
scene.vortex.darkTextureRotation = 0.005
@ -128,26 +128,69 @@ export class TetraGUI extends GUI {
this.debug = window.location.search.includes("debug")
if (this.debug) {
this.debug = this.addFolder("debug")
let cameraPosition = this.debug.addFolder("camera.position").close()
let debug = this.addFolder("debug")
let cameraPosition = debug.addFolder("camera.position").close()
cameraPosition.add(scene.camera.position, "x")
cameraPosition.add(scene.camera.position, "y")
cameraPosition.add(scene.camera.position, "z")
let light = this.debug.addFolder("lights intensity").close()
let light = 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 directionalLightPosition = this.debug.addFolder("directionalLight.position").close()
let directionalLightPosition = debug.addFolder("directionalLight.position").close()
directionalLightPosition.add(scene.directionalLight.position, "x")
directionalLightPosition.add(scene.directionalLight.position, "y")
directionalLightPosition.add(scene.directionalLight.position, "z")
let vortex = this.debug.addFolder("vortex opacity").close()
let vortex = 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 material = this.debug.addFolder("minoes material").close()
this.materialType = "MeshStandardMaterial"
let material
function changeMaterial(type) {
material?.destroy()
switch(type) {
case "MeshBasicMaterial":
Mino.mesh.material = new THREE.MeshBasicMaterial({
envMap: environnement,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.5,
reflectivity: 0.9,
})
break
case "MeshStandardMaterial":
Mino.mesh.material = new THREE.MeshStandardMaterial({
envMap: environnement,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.6,
roughness: 0.4,
metalness: 0.95,
})
break
case "MeshPhysicalMaterial":
Mino.mesh.material = new THREE.MeshPhysicalMaterial({
envMap: environnement,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.6,
roughness: 0.5,
metalness: 0.9,
attenuationDistance: 0.5,
ior: 2,
sheen: 0,
sheenRoughness: 1,
specularIntensity: 1,
thickness: 5,
transmission: 1,
})
break
}
material = debug.addFolder("material type")
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)
@ -159,6 +202,10 @@ export class TetraGUI extends GUI {
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)
}
debug.add(this, "materialType", ["MeshBasicMaterial", "MeshStandardMaterial", "MeshPhysicalMaterial"]).name("material type").onChange(changeMaterial)
changeMaterial(this.materialType)
material.close()
this.fps = new FPS.default()
document.body.appendChild(this.fps.dom)

View File

@ -27,7 +27,7 @@ export class Vortex extends THREE.Group {
texture.repeat.set(1, 1)
}),
blending: THREE.AdditiveBlending,
opacity: 0.035
opacity: 0.006
})
)
this.add(this.darkCylinder)
@ -42,7 +42,7 @@ export class Vortex extends THREE.Group {
texture.repeat.set(2, 1)
}),
blending: THREE.AdditiveBlending,
opacity: 0.6
opacity: 0.7
})
)
this.add(this.colorFullCylinder)

View File

@ -116,14 +116,6 @@ class Mino extends THREE.Object3D {
bevelSegments: 1
}
let minoGeometry = new THREE.ExtrudeGeometry(minoFaceShape, minoExtrudeSettings)
/*let minoMaterial = new THREE.MeshBasicMaterial({
envMap: environnement,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.8,
reflectivity: 0.9,
})*/
let minoMaterial = new THREE.MeshStandardMaterial({
envMap: environnement,
side: THREE.DoubleSide,
@ -132,22 +124,6 @@ class Mino extends THREE.Object3D {
roughness: 0.4,
metalness: 0.95,
})
/*let minoMaterial = new THREE.MeshPhysicalMaterial({
envMap: environnement,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.6,
roughness: 0.5,
metalness: 0.9,
attenuationDistance: 0.5,
ior: 2,
sheen: 0,
sheenRoughness: 1,
specularIntensity: 1,
thickness: 5,
transmission: 1,
})*/
this.mesh = new InstancedMino(minoGeometry, minoMaterial, 2*ROWS*COLUMNS)
}