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 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()
}

2
jsm/TetraControls.js
View File

@ -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")

42
jsm/TetraGUI.js
View File

@ -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() {}
}

8
jsm/TetraScene.js
View File

@ -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)

6
jsm/Vortex.js
View File

@ -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)

4
jsm/gamelogic.js
View File

@ -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)

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 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(

2
style.css
View File

@ -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";
}