vortex edges

jsm/CameraControls.js

@@ -9,11 +9,11 @@ export default class CameraControls extends OrbitControls {
       this.dampingFactor   = 0.04
       this.maxDistance     = 21
       this.keys            = {}
-      this.minPolarAngle   = 1.05
+      // this.minPolarAngle   = 1.05
-      this.maxPolarAngle   = 2.1
+      // this.maxPolarAngle   = 2.1
-      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, 12.5, 0)
+      this.target.set(5.5, 10.5, 0)
 
       this.addEventListener("start", () => domElement.style.cursor = "grabbing")
       this.addEventListener("end", () => domElement.style.cursor = "grab")

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

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