vortex edges

This commit is contained in:
2026-01-26 00:41:19 +01:00
parent 17a87bf16f
commit aa54352af2
3 changed files with 23 additions and 18 deletions

View File

@@ -9,12 +9,12 @@ export default class CameraControls extends OrbitControls {
this.dampingFactor = 0.04
this.maxDistance = 21
this.keys = {}
this.minPolarAngle = 1.05
this.maxPolarAngle = 2.1
this.minAzimuthAngle = 0.9 - Math.PI / 2
this.maxAzimuthAngle = 2.14 - Math.PI / 2
this.target.set(5, 12.5, 0)
// this.minPolarAngle = 1.05
// this.maxPolarAngle = 2.1
// this.minAzimuthAngle = 0.9 - Math.PI / 2
// this.maxAzimuthAngle = 2.14 - Math.PI / 2
this.target.set(5.5, 10.5, 0)
this.addEventListener("start", () => domElement.style.cursor = "grabbing")
this.addEventListener("end", () => domElement.style.cursor = "grab")
}

View File

@@ -22,7 +22,7 @@ export class TetraScene extends THREE.Scene {
this.renderer.domElement.tabIndex = 1
this.camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000)
this.camera.position.set(5, 15, 12)
this.camera.position.set(5.5, 15, 13)
this.controls = new CameraControls(this.camera, this.renderer.domElement)
@@ -60,7 +60,6 @@ export class TetraScene extends THREE.Scene {
this.hardDropSound.setBuffer(buffer)
}.bind(this))
this.playfield = new Playfield(loadingManager)
this.add(this.playfield)
this.minoes = new InstancedMino()
@@ -76,6 +75,7 @@ export class TetraScene extends THREE.Scene {
this.directionalLight.intensity = 1.75
this.directionalLight.position.set(5, -20, 20)
this.music.src = "audio/benevolence.m4a"
this.background = new THREE.Color(0xffffff);
this.fog.color.set(0xffffff)
this.playfield.edge.visible = true
this.playfield.retroEdge.visible = false
@@ -85,6 +85,7 @@ export class TetraScene extends THREE.Scene {
this.directionalLight.intensity = 5
this.directionalLight.position.set(2, -3, 20)
this.music.src = "audio/benevolence.m4a"
this.background = new THREE.Color(0x000000);
this.fog.color.set(0x000000)
this.playfield.edge.visible = true
this.playfield.retroEdge.visible = false

View File

@@ -17,28 +17,30 @@ export class Vortex extends THREE.Group {
const commonCylinderGeometry = new THREE.CylinderGeometry(35, 35, 1000, 12, 1, true)
this.darkCylinder = new THREE.Mesh(
commonCylinderGeometry,
new THREE.MeshLambertMaterial({
side: THREE.BackSide,
blending: THREE.AdditiveBlending,
})
)
this.add(this.darkCylinder)
this.colorFullCylinder = new THREE.Mesh(
commonCylinderGeometry,
new THREE.MeshBasicMaterial({
side: THREE.BackSide,
blending: THREE.AdditiveBlending,
blending: THREE.NormalBlending
})
)
this.add(this.colorFullCylinder)
this.darkCylinder = new THREE.Mesh(
commonCylinderGeometry,
new THREE.MeshLambertMaterial({
side: THREE.BackSide,
blending: THREE.AdditiveBlending
})
)
this.add(this.darkCylinder)
this.position.set(5, 100, -10)
}
set theme(theme) {
const loader = new THREE.TextureLoader(this.loadingManager);
switch (theme) {
case "Plasma":
new THREE.TextureLoader(this.loadingManager).load("./images/plasma.jpg", texture => {
@@ -56,6 +58,7 @@ export class Vortex extends THREE.Group {
this.colorFullCylinder.material.map = texture
})
this.colorFullCylinder.material.opacity = 0.6
this.colorFullCylinder.material.blending = THREE.NormalBlending
this.globalRotation = 0.028
this.darkTextureRotation = 0.005
@@ -82,6 +85,7 @@ export class Vortex extends THREE.Group {
this.colorFullCylinder.material.map = texture
})
this.colorFullCylinder.material.opacity = 0.1
this.colorFullCylinder.material.blending = THREE.AdditiveBlending
this.globalRotation = 0.028
this.darkTextureRotation = 0.006