diff --git a/jsm/CameraControls.js b/jsm/CameraControls.js index 70aa78b..74c860f 100644 --- a/jsm/CameraControls.js +++ b/jsm/CameraControls.js @@ -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") } diff --git a/jsm/TetraScene.js b/jsm/TetraScene.js index c4ea08c..3a7454a 100644 --- a/jsm/TetraScene.js +++ b/jsm/TetraScene.js @@ -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 diff --git a/jsm/Vortex.js b/jsm/Vortex.js index 28e4d75..96f24be 100644 --- a/jsm/Vortex.js +++ b/jsm/Vortex.js @@ -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