diff --git a/app.js b/app.js index 0587316..2176266 100644 --- a/app.js +++ b/app.js @@ -274,7 +274,9 @@ const settings = new Settings() const scene = new TetraScene(settings) -const gui = new TetraGUI(game, settings, stats, scene) +const controls = new TetraControls(scene.camera, renderer.domElement) + +const gui = new TetraGUI(game, settings, stats, scene, controls) scene.add(Mino.mesh) @@ -285,8 +287,6 @@ scene.add(playfield) const nextQueue = new NextQueue() scene.add(nextQueue) -const controls = new TetraControls(scene.camera, renderer.domElement) - messagesSpan.onanimationend = function (event) { event.target.remove() } diff --git a/jsm/TetraControls.js b/jsm/TetraControls.js index 868f95e..778ba69 100644 --- a/jsm/TetraControls.js +++ b/jsm/TetraControls.js @@ -14,7 +14,7 @@ class TetraControls extends OrbitControls { this.maxPolarAngle = 2.14 this.minAzimuthAngle = 0.9 - Math.PI / 2 this.maxAzimuthAngle = 2.14 - Math.PI / 2 - this.target.set(5, 9, 0) + this.target.set(5, 7, 0) this.addEventListener("start", () => domElement.style.cursor = "grabbing") this.addEventListener("end", () => domElement.style.cursor = "grab") diff --git a/jsm/TetraGUI.js b/jsm/TetraGUI.js index 795888e..9df63ec 100644 --- a/jsm/TetraGUI.js +++ b/jsm/TetraGUI.js @@ -5,7 +5,7 @@ import { Mino, environnement } from './gamelogic.js' export class TetraGUI extends GUI { - constructor(game, settings, stats, scene) { + constructor(game, settings, stats, scene, controls) { super({title: "teTra"}) this.startButton = this.add(game, "start").name("Jouer").hide() @@ -44,18 +44,18 @@ export class TetraGUI extends GUI { }) loadingManager.onLoad = function() { scene.vortex.darkCylinder.material.map = darkTexture - scene.vortex.darkCylinder.material.opacity = 0.055 + scene.vortex.darkCylinder.material.opacity = 0.17 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 scene.vortex.darkMoveForward = 0.009 scene.vortex.colorFullTextureRotation = 0.006 - scene.vortex.colorFullMoveForward = 0.015 + scene.vortex.colorFullMoveForward = 0.025 - scene.ambientLight.intensity = 4 - scene.directionalLight.intensity = 4 + scene.ambientLight.intensity = 1 + scene.directionalLight.intensity = 2 Mino.mesh.material.opacity = 0.6 Mino.mesh.material.roughness = 0.4 @@ -66,18 +66,18 @@ export class TetraGUI extends GUI { darkTexture = new THREE.TextureLoader(loadingManager).load("./images/dark.jpg", texture => { texture.wrapS = THREE.RepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping - texture.repeat.set(1, 2) + texture.repeat.set(2, 2) }) colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => { texture.wrapS = THREE.RepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping - texture.repeat.set(1, 2) + texture.repeat.set(2, 2) }) loadingManager.onLoad = function() { scene.vortex.darkCylinder.material.map = darkTexture - scene.vortex.darkCylinder.material.opacity = 0.1 + scene.vortex.darkCylinder.material.opacity = 0.05 scene.vortex.colorFullCylinder.material.map = colorfullTexture - scene.vortex.colorFullCylinder.material.opacity = 0.4 + scene.vortex.colorFullCylinder.material.opacity = 0.25 scene.vortex.globalRotation = 0.028 scene.vortex.darkTextureRotation = 0.006 @@ -131,10 +131,11 @@ export class TetraGUI extends GUI { this.dev = window.location.search.includes("dev") if (this.dev) { let dev = this.addFolder("dev") - let cameraPosition = dev.addFolder("camera.position").close() + let cameraPosition = dev.addFolder("camera").close() cameraPosition.add(scene.camera.position, "x") cameraPosition.add(scene.camera.position, "y") cameraPosition.add(scene.camera.position, "z") + cameraPosition.add(scene.camera, "fov", 0, 200).onChange(() => scene.camera.updateProjectionMatrix()) let light = dev.addFolder("lights intensity").close() light.add(scene.ambientLight, "intensity").name("ambient").min(0).max(20) @@ -170,7 +171,7 @@ export class TetraGUI extends GUI { side: THREE.DoubleSide, transparent: true, opacity: 0.6, - roughness: 0.06, + roughness: 0.02, metalness: 0.95, }) break @@ -207,8 +208,17 @@ export class TetraGUI extends GUI { changeMaterial(this.materialType) material.close() - this.fps = new FPS.default() - document.body.appendChild(this.fps.dom) + let fps = new FPS.default() + document.body.appendChild(fps.dom) + + this.update = function() { + fps.update() + } + + controls.addEventListener("change", () => cameraPosition.controllersRecursive().forEach((control) => { + control.updateDisplay() + })) + } this.load() @@ -234,7 +244,5 @@ export class TetraGUI extends GUI { } } - update() { - this.fps?.update() - } + update() {} } \ No newline at end of file diff --git a/jsm/TetraScene.js b/jsm/TetraScene.js index bc23475..c065526 100644 --- a/jsm/TetraScene.js +++ b/jsm/TetraScene.js @@ -8,16 +8,16 @@ export class TetraScene extends THREE.Scene { this.loadingManager = new THREE.LoadingManager() - this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) - this.camera.position.set(5, 0, 16) + this.camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000) + this.camera.position.set(5, 3, 12) this.vortex = new Vortex(this.loadingManager) this.add(this.vortex) - this.ambientLight = new THREE.AmbientLight(0xffffff, 4) + this.ambientLight = new THREE.AmbientLight(0xffffff, 1) this.add(this.ambientLight) - this.directionalLight = new THREE.DirectionalLight(0xffffff, 4) + this.directionalLight = new THREE.DirectionalLight(0xffffff, 2) this.directionalLight.position.set(5, 0, 20) this.add(this.directionalLight) diff --git a/jsm/Vortex.js b/jsm/Vortex.js index be71d5f..ad12f35 100644 --- a/jsm/Vortex.js +++ b/jsm/Vortex.js @@ -11,7 +11,7 @@ export class Vortex extends THREE.Group { this.darkMoveForward = 0.009 this.colorFullTextureRotation = 0.006 - this.colorFullMoveForward = 0.015 + this.colorFullMoveForward = 0.025 const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 500, 12, 1, true) @@ -27,7 +27,7 @@ export class Vortex extends THREE.Group { texture.repeat.set(1, 1) }), blending: THREE.AdditiveBlending, - opacity: 0.055 + opacity: 0.17 }) ) 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) diff --git a/jsm/gamelogic.js b/jsm/gamelogic.js index 0064b80..9e3a476 100644 --- a/jsm/gamelogic.js +++ b/jsm/gamelogic.js @@ -17,7 +17,7 @@ const COLORS = { T: 0xedb2ff, Z: 0xffb8c5, LOCKING: "white", - GHOST: 0xc0c0c0, + GHOST: 0x99a9b2, EDGE: 0x88abe0 } @@ -121,7 +121,7 @@ class Mino extends THREE.Object3D { side: THREE.DoubleSide, transparent: true, opacity: 0.6, - roughness: 0.4, + roughness: 0.2, metalness: 0.95, }) this.mesh = new InstancedMino(minoGeometry, minoMaterial, 2*ROWS*COLUMNS) diff --git a/jsm/service-worker.js b/jsm/service-worker.js index b3e69ed..a9badb1 100644 --- a/jsm/service-worker.js +++ b/jsm/service-worker.js @@ -16,7 +16,7 @@ Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved. const OFFLINE_VERSION = 1; const CACHE_NAME = "offline"; // Customize this with a different URL if needed. -const OFFLINE_URL = "index.html"; +const OFFLINE_URL = "../index.html"; self.addEventListener("install", (event) => { event.waitUntil( diff --git a/style.css b/style.css index b32c01c..ba0ea19 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ body { margin: 0; padding: 0; background-color: #222; - font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", + font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }