raise visibility with a lot of stars

index.html

@@ -27,10 +27,10 @@
         backdrop-filter: blur(4px);
         border-right: 2px solid #336;
         transform: translate(0, 0);
-        transition: transform .2 ease;
+        transition: transform .2s ease-out;
       }
       #info.hidden {
-        transform: translate(-20rem, 0);
+        transform: translate(-22rem, 0);
       }
       label {
         position: fixed;
@@ -44,9 +44,15 @@
         background: #0008;
         line-height: 1;
         cursor: pointer;
+        transition: opacity .2s ease;
       }
       label.highlighted {
         color: yellow;
+        z-index: 10000;
+      }
+      label.dimmed {
+        opacity: .3;
+        z-index: 0;
       }
     </style>
   </head>

src/main.ts

@@ -57,8 +57,8 @@ async function init() {
     pointer.y = -(event.clientY / window.innerHeight) * 2 + 1
   })
   document.addEventListener('click', () => {
-    for (let star of stars.children) {
+    for (let star of stars.children as Star[]) {
-      ;(star as Star).highlighted = false
+      star.highlighted = false
     }
 
     let closest: Intersection<Object3D<Event>> | null = null
@@ -83,12 +83,12 @@ async function init() {
     }
   })
 
-  for (let child of stars.children) {
+  for (let child of stars.children as Star[]) {
-    ;(child as Star).labelEl.addEventListener('click', (event) => {
+    child.labelEl.addEventListener('click', (event) => {
       event.stopPropagation()
 
-      for (let star of stars.children) {
+      for (let star of stars.children as Star[]) {
-        ;(star as Star).highlighted = false
+        star.highlighted = false
       }
 
       const star = child as Star
@@ -108,15 +108,11 @@ async function init() {
 
     const distanceToPlane = camera.position.distanceTo(plane.children[0].position)
 
-    // update label positions in HTML space
+    // updating HTML space and the stars' color
     // Attention: This has to happen after the render call, to avoid flickering
     for (let star of stars.children as Star[]) {
       star.setLabelPos(camera, w, h)
-      if (camera.position.distanceTo(star.coords) > distanceToPlane) {
+      star.dimmed = camera.position.distanceTo(star.coords) > distanceToPlane
-        star.dimLabel()
-      } else {
-        star.undimLabel()
-      }
     }
   })
 

src/stars.ts

@@ -26,11 +26,10 @@ export class Star extends Group {
   public starData: StarData
   public labelEl = document.createElement('label')
 
-  private labelDimmed = false
-
   public coords = new Vector3()
 
   private isHighlighted = false
+  private isDimmed = false
   private normalPointSize: number
   private highlightedPointSize: number
 
@@ -39,9 +38,11 @@ export class Star extends Group {
   private pointGeometry = new BufferGeometry()
 
   private whiteColor = new Float32BufferAttribute([255, 255, 255], 3)
+  private grayColor = new Float32BufferAttribute([51, 51, 51], 3)
   private yellowColor = new Float32BufferAttribute([255, 255, 0], 3)
 
   private point: Points<BufferGeometry, PointsMaterial>
+  private pole: Line<BufferGeometry, LineBasicMaterial>
 
   constructor(starData: StarData, maxRadius: number) {
     super()
@@ -59,9 +60,9 @@ export class Star extends Group {
     const tangentialCoords = new Vector3(x, 0, z)
 
     // distance indicator / pole
-    const poleLine = new Line(new BufferGeometry(), this.lineMaterial)
+    this.pole = new Line(new BufferGeometry(), this.lineMaterial)
-    poleLine.geometry.setFromPoints([this.coords, tangentialCoords])
+    this.pole.geometry.setFromPoints([this.coords, tangentialCoords])
-    this.add(poleLine)
+    this.add(this.pole)
 
     // the actual "star"
     const coords = [this.coords.x, this.coords.y, this.coords.z]
@@ -79,13 +80,28 @@ export class Star extends Group {
     container.appendChild(this.labelEl)
   }
 
-  private setHighlight(isHighlight = true) {
+  private setAttributes() {
-    const color = isHighlight ? this.yellowColor : this.whiteColor
+    if (this.isDimmed && !this.isHighlighted) {
-    this.pointGeometry.setAttribute('color', color)
+      this.pointMaterial.setValues({ size: this.normalPointSize })
-    this.pointMaterial.setValues({
+      this.pointGeometry.setAttribute('color', this.grayColor)
-      size: isHighlight ? this.highlightedPointSize : this.normalPointSize,
+      this.lineMaterial.setValues({ color: 0x333333 })
-    })
+      this.labelEl.classList.remove('highlighted')
-    this.labelEl.classList.toggle('highlighted', isHighlight)
+      this.labelEl.classList.add('dimmed')
+      this.labelEl.style.zIndex = '0' // dimmed always in the back
+    } else if (this.isHighlighted) {
+      this.pointGeometry.setAttribute('color', this.yellowColor)
+      this.pointMaterial.setValues({ size: this.highlightedPointSize })
+      this.lineMaterial.setValues({ color: 0xffff00 })
+      this.labelEl.classList.remove('dimmed')
+      this.labelEl.classList.add('highlighted')
+      this.labelEl.style.zIndex = '10000' // highlights always on top
+    } else {
+      this.pointGeometry.setAttribute('color', this.whiteColor)
+      this.pointMaterial.setValues({ size: this.normalPointSize })
+      this.lineMaterial.setValues({ color: 0xffffff })
+      this.labelEl.classList.remove('highlighted')
+      this.labelEl.classList.remove('dimmed')
+    }
   }
 
   public get highlighted() {
@@ -94,12 +110,16 @@ export class Star extends Group {
 
   public set highlighted(isHighlighted) {
     this.isHighlighted = isHighlighted
-    this.setHighlight(isHighlighted)
+    this.setAttributes()
   }
 
-  public toggleHighlight() {
+  public get dimmed() {
-    this.isHighlighted = !this.isHighlighted
+    return this.isDimmed
-    this.setHighlight(this.isHighlighted)
+  }
+
+  public set dimmed(isDimmed) {
+    this.isDimmed = isDimmed
+    this.setAttributes()
   }
 
   public setLabelPos(camera: Camera, width: number, height: number) {
@@ -112,24 +132,11 @@ export class Star extends Group {
 
     this.labelEl.style.transform = `translate(${pos.x}px, ${pos.y}px)`
 
-    if (this.labelDimmed) {
+    if (!this.isDimmed && !this.isHighlighted) {
-      this.labelEl.style.zIndex = '0'
-    } else {
       const zIndex = `${10000000 - Math.round(pos.z * 10000000)}` // ridiculous
       this.labelEl.style.zIndex = zIndex
     }
   }
-
-  public dimLabel() {
-    this.labelDimmed = true
-    this.labelEl.style.opacity = '0.3'
-    this.labelEl.style.zIndex = '0'
-  }
-
-  public undimLabel() {
-    this.labelEl.style.opacity = '1'
-    this.labelDimmed = false
-  }
 }
 
 export async function renderStars(maxRadius: number) {