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

fov

Browse Source
This commit is contained in:
Adrien MALINGREY 2024-02-24 15:07:18 +01:00
parent 92d953ef62
commit 935343d301
8 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app.js
View File

@ -274,7 +274,9 @@ const settings = new Settings()
const scene = new TetraScene(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) scene.add(Mino.mesh)
@ -285,8 +287,6 @@ scene.add(playfield)
const nextQueue = new NextQueue() const nextQueue = new NextQueue()
scene.add(nextQueue) scene.add(nextQueue)
const controls = new TetraControls(scene.camera, renderer.domElement)
messagesSpan.onanimationend = function (event) { messagesSpan.onanimationend = function (event) {
event.target.remove() event.target.remove()
} }

2
jsm/TetraControls.js
View File

@ -14,7 +14,7 @@ class TetraControls extends OrbitControls {
this.maxPolarAngle = 2.14 this.maxPolarAngle = 2.14
this.minAzimuthAngle = 0.9 - Math.PI / 2 this.minAzimuthAngle = 0.9 - Math.PI / 2
this.maxAzimuthAngle = 2.14 - 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("start", () => domElement.style.cursor = "grabbing")
this.addEventListener("end", () => domElement.style.cursor = "grab") this.addEventListener("end", () => domElement.style.cursor = "grab")

42
jsm/TetraGUI.js
View File

@ -5,7 +5,7 @@ import { Mino, environnement } from './gamelogic.js'
export class TetraGUI extends GUI { export class TetraGUI extends GUI {
constructor(game, settings, stats, scene) { constructor(game, settings, stats, scene, controls) {
super({title: "teTra"}) super({title: "teTra"})
this.startButton = this.add(game, "start").name("Jouer").hide() this.startButton = this.add(game, "start").name("Jouer").hide()
@ -44,18 +44,18 @@ export class TetraGUI extends GUI {
}) })
loadingManager.onLoad = function() { loadingManager.onLoad = function() {
scene.vortex.darkCylinder.material.map = darkTexture 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.map = colorfullTexture
scene.vortex.colorFullCylinder.material.opacity = 0.6 scene.vortex.colorFullCylinder.material.opacity = 0.7
scene.vortex.globalRotation = 0.028 scene.vortex.globalRotation = 0.028
scene.vortex.darkTextureRotation = 0.005 scene.vortex.darkTextureRotation = 0.005
scene.vortex.darkMoveForward = 0.009 scene.vortex.darkMoveForward = 0.009
scene.vortex.colorFullTextureRotation = 0.006 scene.vortex.colorFullTextureRotation = 0.006
scene.vortex.colorFullMoveForward = 0.015 scene.vortex.colorFullMoveForward = 0.025
scene.ambientLight.intensity = 4 scene.ambientLight.intensity = 1
scene.directionalLight.intensity = 4 scene.directionalLight.intensity = 2
Mino.mesh.material.opacity = 0.6 Mino.mesh.material.opacity = 0.6
Mino.mesh.material.roughness = 0.4 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 => { darkTexture = new THREE.TextureLoader(loadingManager).load("./images/dark.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(1, 2) texture.repeat.set(2, 2)
}) })
colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => { colorfullTexture = new THREE.TextureLoader(loadingManager).load("./images/colorfull.jpg", texture => {
texture.wrapS = THREE.RepeatWrapping texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping texture.wrapT = THREE.MirroredRepeatWrapping
texture.repeat.set(1, 2) texture.repeat.set(2, 2)
}) })
loadingManager.onLoad = function() { loadingManager.onLoad = function() {
scene.vortex.darkCylinder.material.map = darkTexture 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.map = colorfullTexture
scene.vortex.colorFullCylinder.material.opacity = 0.4 scene.vortex.colorFullCylinder.material.opacity = 0.25
scene.vortex.globalRotation = 0.028 scene.vortex.globalRotation = 0.028
scene.vortex.darkTextureRotation = 0.006 scene.vortex.darkTextureRotation = 0.006
@ -131,10 +131,11 @@ export class TetraGUI extends GUI {
this.dev = window.location.search.includes("dev") this.dev = window.location.search.includes("dev")
if (this.dev) { if (this.dev) {
let dev = this.addFolder("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, "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")
cameraPosition.add(scene.camera, "fov", 0, 200).onChange(() => scene.camera.updateProjectionMatrix())
let light = dev.addFolder("lights intensity").close() let light = dev.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)
@ -170,7 +171,7 @@ export class TetraGUI extends GUI {
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6, opacity: 0.6,
roughness: 0.06, roughness: 0.02,
metalness: 0.95, metalness: 0.95,
}) })
break break
@ -207,8 +208,17 @@ export class TetraGUI extends GUI {
changeMaterial(this.materialType) changeMaterial(this.materialType)
material.close() material.close()
this.fps = new FPS.default() let fps = new FPS.default()
document.body.appendChild(this.fps.dom) document.body.appendChild(fps.dom)
this.update = function() {
fps.update()
}
controls.addEventListener("change", () => cameraPosition.controllersRecursive().forEach((control) => {
control.updateDisplay()
}))
} }
this.load() this.load()
@ -234,7 +244,5 @@ export class TetraGUI extends GUI {
} }
} }
update() { update() {}
this.fps?.update()
}
} }

8
jsm/TetraScene.js
View File

@ -8,16 +8,16 @@ export class TetraScene extends THREE.Scene {
this.loadingManager = new THREE.LoadingManager() this.loadingManager = new THREE.LoadingManager()
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) this.camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000)
this.camera.position.set(5, 0, 16) this.camera.position.set(5, 3, 12)
this.vortex = new Vortex(this.loadingManager) this.vortex = new Vortex(this.loadingManager)
this.add(this.vortex) this.add(this.vortex)
this.ambientLight = new THREE.AmbientLight(0xffffff, 4) this.ambientLight = new THREE.AmbientLight(0xffffff, 1)
this.add(this.ambientLight) 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.directionalLight.position.set(5, 0, 20)
this.add(this.directionalLight) this.add(this.directionalLight)

6
jsm/Vortex.js
View File

@ -11,7 +11,7 @@ export class Vortex extends THREE.Group {
this.darkMoveForward = 0.009 this.darkMoveForward = 0.009
this.colorFullTextureRotation = 0.006 this.colorFullTextureRotation = 0.006
this.colorFullMoveForward = 0.015 this.colorFullMoveForward = 0.025
const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 500, 12, 1, true) 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) texture.repeat.set(1, 1)
}), }),
blending: THREE.AdditiveBlending, blending: THREE.AdditiveBlending,
opacity: 0.055 opacity: 0.17
}) })
) )
this.add(this.darkCylinder) this.add(this.darkCylinder)
@ -42,7 +42,7 @@ export class Vortex extends THREE.Group {
texture.repeat.set(2, 1) texture.repeat.set(2, 1)
}), }),
blending: THREE.AdditiveBlending, blending: THREE.AdditiveBlending,
opacity: 0.6 opacity: 0.7
}) })
) )
this.add(this.colorFullCylinder) this.add(this.colorFullCylinder)

4
jsm/gamelogic.js
View File

@ -17,7 +17,7 @@ const COLORS = {
T: 0xedb2ff, T: 0xedb2ff,
Z: 0xffb8c5, Z: 0xffb8c5,
LOCKING: "white", LOCKING: "white",
GHOST: 0xc0c0c0, GHOST: 0x99a9b2,
EDGE: 0x88abe0 EDGE: 0x88abe0
} }
@ -121,7 +121,7 @@ class Mino extends THREE.Object3D {
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
opacity: 0.6, opacity: 0.6,
roughness: 0.4, roughness: 0.2,
metalness: 0.95, metalness: 0.95,
}) })
this.mesh = new InstancedMino(minoGeometry, minoMaterial, 2*ROWS*COLUMNS) this.mesh = new InstancedMino(minoGeometry, minoMaterial, 2*ROWS*COLUMNS)

2
jsm/service-worker.js
View File

@ -16,7 +16,7 @@ Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
const OFFLINE_VERSION = 1; const OFFLINE_VERSION = 1;
const CACHE_NAME = "offline"; const CACHE_NAME = "offline";
// Customize this with a different URL if needed. // Customize this with a different URL if needed.
const OFFLINE_URL = "index.html"; const OFFLINE_URL = "../index.html";
self.addEventListener("install", (event) => { self.addEventListener("install", (event) => {
event.waitUntil( event.waitUntil(

2
style.css
View File

@ -2,7 +2,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #222; 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", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
} }