From 6f0a540bb3d0a6a18375854b6b237c1dd26906c1 Mon Sep 17 00:00:00 2001 From: adrien Date: Sat, 15 Jul 2023 21:10:30 +0200 Subject: [PATCH] edge and ghost material --- jsm/TetraGUI.js | 31 ++++++++++++---------------- jsm/TetraScene.js | 9 +++------ jsm/gamelogic.js | 51 +++++++++++++++++++++++++---------------------- 3 files changed, 43 insertions(+), 48 deletions(-) diff --git a/jsm/TetraGUI.js b/jsm/TetraGUI.js index cd7e2fe..efdbdf3 100644 --- a/jsm/TetraGUI.js +++ b/jsm/TetraGUI.js @@ -55,8 +55,8 @@ export class TetraGUI extends GUI { scene.vortex.colorFullTextureRotation = 0.006 scene.vortex.colorFullMoveForward = 0.013 - scene.ambientLight.intensity = 0.5 - scene.directionalLight.intensity = 6 + scene.ambientLight.intensity = 1 + scene.directionalLight.intensity = 5 } break case "Espace": @@ -142,28 +142,23 @@ export class TetraGUI extends GUI { directionalLightPosition.add(scene.directionalLight.position, "x") directionalLightPosition.add(scene.directionalLight.position, "y") directionalLightPosition.add(scene.directionalLight.position, "z") - - let directionalLightTargetPosition = this.debug.addFolder("directionalLight.target").close() - directionalLightTargetPosition.add(scene.directionalLight.target.position, "x") - directionalLightTargetPosition.add(scene.directionalLight.target.position, "y") - directionalLightTargetPosition.add(scene.directionalLight.target.position, "z") 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 material = this.debug.addFolder("minoes material").close() - material.add(minoMaterial, "opacity").min(0).max(1) - //material.add(minoMaterial, "reflectivity").min(0).max(1) - material.add(minoMaterial, "roughness").min(0).max(1) - material.add(minoMaterial, "metalness").min(0).max(1) - //material.add(minoMaterial, "attenuationDistance").min(0).max(1).hide() - //material.add(minoMaterial, "ior").min(1).max(2).hide() - //material.add(minoMaterial, "sheen").min(0).max(1).hide() - //material.add(minoMaterial, "sheenRoughness").min(0).max(1).hide() - //material.add(minoMaterial, "specularIntensity").min(0).max(1).hide() - //material.add(minoMaterial, "thickness").min(0).max(5).hide() - //material.add(minoMaterial, "transmission").min(0).max(1).hide() + if ("opacity" in minoMaterial) material.add(minoMaterial, "opacity").min(0).max(1) + if ("reflectivity" in minoMaterial) material.add(minoMaterial, "reflectivity").min(0).max(1) + if ("roughness" in minoMaterial) material.add(minoMaterial, "roughness").min(0).max(1) + if ("metalness" in minoMaterial) material.add(minoMaterial, "metalness").min(0).max(1) + if ("attenuationDistance" in minoMaterial) material.add(minoMaterial, "attenuationDistance").min(0).max(1) + if ("ior" in minoMaterial) material.add(minoMaterial, "ior").min(1).max(2) + if ("sheen" in minoMaterial) material.add(minoMaterial, "sheen").min(0).max(1) + if ("sheenRoughness" in minoMaterial) material.add(minoMaterial, "sheenRoughness").min(0).max(1) + if ("specularIntensity" in minoMaterial) material.add(minoMaterial, "specularIntensity").min(0).max(1) + if ("thickness" in minoMaterial) material.add(minoMaterial, "thickness").min(0).max(5) + if ("transmission" in minoMaterial) material.add(minoMaterial, "transmission").min(0).max(1) this.fps = new FPS.default() document.body.appendChild(this.fps.dom) diff --git a/jsm/TetraScene.js b/jsm/TetraScene.js index e7690bb..595a875 100644 --- a/jsm/TetraScene.js +++ b/jsm/TetraScene.js @@ -12,15 +12,12 @@ export class TetraScene extends THREE.Scene { this.vortex = new Vortex(loadingManager) this.add(this.vortex) - this.ambientLight = new THREE.AmbientLight(0xffffff, 0.5) + this.ambientLight = new THREE.AmbientLight(0xffffff, 1) this.add(this.ambientLight) - this.directionalLight = new THREE.DirectionalLight(0xffffff, 6) - this.directionalLight.position.set(5, -100, -20) + this.directionalLight = new THREE.DirectionalLight(0xffffff, 5) + this.directionalLight.position.set(5, 40, 20) this.add(this.directionalLight) - this.directionalLight.target = new THREE.Object3D() - this.directionalLight.target.position.set(5, 0, 0) - this.add(this.directionalLight.target) /* Sounds */ diff --git a/jsm/gamelogic.js b/jsm/gamelogic.js index b27920f..5760bc8 100644 --- a/jsm/gamelogic.js +++ b/jsm/gamelogic.js @@ -6,7 +6,7 @@ Array.prototype.pick = function () { return this.splice(Math.floor(Math.random() let P = (x, y, z = 0) => new THREE.Vector3(x, y, z) -const GRAVITY = -20 +const GRAVITY = -30 const COLORS = { I: 0xafeff9, @@ -17,7 +17,8 @@ const COLORS = { T: 0xedb2ff, Z: 0xffb8c5, LOCKING: "white", - GHOST: "white", + GHOST: 0xc0c0c0, + EDGE: 0x88abe0 } const TRANSLATION = { @@ -47,6 +48,11 @@ const FACING = { } +const ROWS = 24 +const SKYLINE = 20 +const COLUMNS = 10 + + const envRenderTarget = new THREE.WebGLCubeRenderTarget(256) const environnement = envRenderTarget.texture environnement.type = THREE.HalfFloatType @@ -120,7 +126,7 @@ class Mino extends THREE.Object3D { this.rotateOnWorldAxis(this.rotationAngle, delta * this.angularVelocity) this.updateMatrix() } -} + } class Tetromino extends THREE.InstancedMesh { @@ -211,13 +217,6 @@ class Tetromino extends THREE.InstancedMesh { get tSpin() { return T_SPIN.NONE } - - copy(piece) { - this.position.copy(piece.position) - this.minoesPosition = piece.minoesPosition - this.facing = piece.facing - while (this.canMove(TRANSLATION.DOWN)) this.position.y-- - } } Tetromino.prototype.minoMaterial = minoMaterial Tetromino.prototype.lockingColor = new THREE.Color(COLORS.LOCKING) @@ -232,14 +231,23 @@ Tetromino.prototype.srs = [ Tetromino.prototype.lockDelay = 500 -class Ghost extends Tetromino {} -Ghost.prototype.minoMaterial = new THREE.MeshBasicMaterial({ +class Ghost extends Tetromino { + + copy(piece) { + this.position.copy(piece.position) + this.minoesPosition = piece.minoesPosition + this.facing = piece.facing + while (this.canMove(TRANSLATION.DOWN)) this.position.y-- + } + +} +/*Ghost.prototype.minoMaterial = new THREE.MeshBasicMaterial({ envMap: environnement, reflectivity: 0.9, transparent: true, opacity: 0.15, side: THREE.DoubleSide, -}) +})*/ Ghost.prototype.freeColor = new THREE.Color(COLORS.GHOST) Ghost.prototype.minoesPosition = [ [P(0, 0, 0), P(0, 0, 0), P(0, 0, 0), P(0, 0, 0)], @@ -334,23 +342,18 @@ Z.prototype.minoesPosition = [ Z.prototype.freeColor = new THREE.Color(COLORS.Z) -const ROWS = 24 -const SKYLINE = 20 -const COLUMNS = 10 - - class Playfield extends THREE.Group { constructor() { super() this.visible = false - const edgeMaterial = new THREE.MeshBasicMaterial({ - color: 0x88abe0, + const edgeMaterial = new THREE.MeshStandardMaterial({ + color: COLORS.EDGE, envMap: environnement, transparent: true, - opacity: 0.4, - reflectivity: 0.9, - refractionRatio: 0.5 + opacity: 0.2, + roughness: 0.1, + metallness: 0.9, }) const edgeShape = new THREE.Shape() .moveTo(-.3, SKYLINE) @@ -410,7 +413,7 @@ class Playfield extends THREE.Group { if (piece) { this.add(piece) piece.position.set(4, SKYLINE) - this.ghost.color = piece.freeColor + //this.ghost.color = piece.freeColor this.ghost.copy(piece) this.ghost.visible = true }