fix room label display

script.js

@@ -20,7 +20,7 @@ let metrics = {
 }
 
 const scene = new THREE.Scene()
-const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
+const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 1000 )
 let homeContainer = new THREE.Group()
 scene.add(homeContainer)
 let home = new THREE.Group()
@@ -66,7 +66,7 @@ homeContainer.rotation.x = 0.6 * (-Math.PI / 2)
 // Returns the first child (or container) whose name matches
 function childWithName(container, name) {
     if (container.userData.name == name) {
-        return container;
+        return container
     }
     for (var child of container.children) {
         let childMatches = childWithName(child, name)
@@ -86,14 +86,15 @@ function animate() {
         let updatedEntities = areasWithEntitiesToUpdate[area]
         if (updatedEntities.length > 0) {
             areasToUpdate.add(area)
-        } else {
-
         }
 
         let label = childWithName(scene, area + "LABEL")
         label.lookAt(camera.position)
     }
+
     for (var area of areasToUpdate) {
+        let updatedEntities = areasWithEntitiesToUpdate[area]
+        // plh-evil: use these somehow?
         let areaContainer = childWithName(scene, area)
         let box = childWithName(areaContainer, "box")
 
@@ -147,20 +148,24 @@ animate()
 function createTextMesh(text, colorName) {
     let canvas = document.createElement('canvas')
     let context = canvas.getContext('2d')
+    let font = '144px monospace'
     context.textAlign = "center"
-    context.textBaseline = "middle"
-    context.font = '144pt sans-serif'
+    context.font = font
 
     let size = context.measureText(text)
-    let height = context.measureText('M').width
+    let height = context.measureText('M').width * 1.5
     size.height = height
 
-    let canvasScale = 0.1
-    canvas.width = size.width * canvasScale * 0.6
+    let canvasScale = 1
+    canvas.width = size.width * canvasScale
     canvas.height = size.height * canvasScale
 
+    context.font = font
+
+    console.log([canvas.width, canvas.height])
+
     context.fillStyle = colorName
-    context.fillText(text, 5, 10)
+    context.fillText(text, 0, 100)
 
     let texture = new THREE.CanvasTexture(canvas)
     texture.needsUpdate = true
@@ -170,7 +175,7 @@ function createTextMesh(text, colorName) {
     material.transparent = true
     material.depthTest = false
 
-    let scaleFactor = 0.05
+    let scaleFactor = 0.005
 
     let plane = new THREE.PlaneGeometry(canvas.width * scaleFactor, canvas.height * scaleFactor)
     let mesh = new THREE.Mesh(plane, material)
@@ -192,7 +197,7 @@ function updateWithHAData(data) {
 
     let sortedAreaNames = areaNames
     sortedAreaNames.sort(function(a, b) {
-        return b.length - a.length;
+        return b.length - a.length
     })
 
     for (var entity of data) {