clickable labels

index.html

@@ -27,9 +27,6 @@
         border: 1px solid #DDD;
         border-radius: .5em;
       }
-      #info > button.highlighted {
-        border-color: yellow;
-      }
       label {
         position: fixed;
         top: 0;
@@ -38,10 +35,13 @@
         margin-left: .5em;
         font-weight: bold;
         color: white;
-        pointer-events: none;
         transform: translate(0, 0);
         background: #0008;
         line-height: 1;
+        cursor: pointer;
+      }
+      label.highlighted {
+        color: yellow;
       }
     </style>
   </head>

src/main.ts

@@ -78,6 +78,20 @@ function init() {
     }
   })
 
+  for (let child of stars.children) {
+    ;(child as Star).labelEl.addEventListener('click', (event) => {
+      event.stopPropagation()
+
+      for (let star of stars.children) {
+        ;(star as Star).highlighted = false
+      }
+
+      const star = child as Star
+      star.highlighted = true
+      infoEl.innerText = JSON.stringify(star.starData)
+    })
+  }
+
   renderer.setAnimationLoop(() => {
     raycaster.setFromCamera(pointer, camera)
 

src/stars.ts

@@ -25,6 +25,7 @@ export interface StarData {
 export class Star extends Group {
   public isStar = true
   public starData: StarData
+  public labelEl = document.createElement('label')
 
   private coords = new Vector3()
 
@@ -39,8 +40,6 @@ export class Star extends Group {
   private whiteColor = new Float32BufferAttribute([255, 255, 255], 3)
   private yellowColor = new Float32BufferAttribute([255, 255, 0], 3)
 
-  private labelEl = document.createElement('label')
-
   private point: Points<BufferGeometry, PointsMaterial>
 
   constructor(starData: StarData) {
@@ -81,6 +80,7 @@ export class Star extends Group {
     this.pointMaterial.setValues({
       size: isHighlight ? this.highlightedPointSize : this.normalPointSize,
     })
+    this.labelEl.classList.toggle('highlighted', isHighlight)
   }
 
   public get highlighted() {
@@ -106,7 +106,7 @@ export class Star extends Group {
     pos.y = Math.round((0.5 - pos.y / 2) * (height / dpr))
 
     this.labelEl.style.transform = `translate(${pos.x}px, ${pos.y}px)`
-    const zIndex = `${10000000 - Math.round(pos.z * 10000000)}`
+    const zIndex = `${10000000 - Math.round(pos.z * 10000000)}` // ridiculous
     this.labelEl.style.zIndex = zIndex
   }
 }