From 697bc82ae6f63a36ff601169b7b038540dc6bd83 Mon Sep 17 00:00:00 2001
From: Peter Hajas <peter@haj.as>
Date: Sun, 8 May 2022 11:21:31 -0600
Subject: [PATCH] some work on getting text rendering working better

---
 script.js | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/script.js b/script.js
index 1868134..32afb7f 100644
--- a/script.js
+++ b/script.js
@@ -98,14 +98,25 @@ animate()
 function createTextMesh(text, colorName) {
     let canvas = document.createElement('canvas')
     let context = canvas.getContext('2d')
-    let size = context.measureText(text)
-    canvas.width = 100
-    canvas.height = 100
     context.textAlign = "center"
     context.textBaseline = "middle"
     context.fillStyle = colorName
-    context.font = '24pt sans-serif'
-    context.fillText(text, 50, 50)
+    context.font = '144pt sans-serif'
+
+    let size = context.measureText(text)
+    let height = context.measureText('M').width
+    size.height = height
+
+    let canvasScale = 0.1
+    canvas.width = size.width * canvasScale * 0.6
+    canvas.height = size.height * canvasScale
+
+    console.log([canvas.width, canvas.height])
+
+    context.fillStyle = 'red'
+    context.fillRect(0, 0, canvas.width, canvas.height)
+    context.fillStyle = 'blue'
+    context.fillText(text, 5, 10)
 
     let texture = new THREE.CanvasTexture(canvas)
     texture.needsUpdate = true
@@ -114,7 +125,9 @@ function createTextMesh(text, colorName) {
     })
     material.transparent = true
 
-    let plane = new THREE.PlaneGeometry(3, 3)
+    let scaleFactor = 0.05
+
+    let plane = new THREE.PlaneGeometry(canvas.width * scaleFactor, canvas.height * scaleFactor)
     let mesh = new THREE.Mesh(plane, material)
 
     return mesh
@@ -223,15 +236,19 @@ function configureScene(data) {
         roomLines.userData.name = "lines"
         roomContainer.add(roomLines)
 
-        let roomLabel = createTextMesh("A test or something", "red")
-        roomLabel.userData.name = "label"
-        roomContainer.add(roomLabel)
-
         let roomZ = room.z || 0
 
         setPosition(roomContainer, room.x, room.y, roomZ, room.w, room.h, room.d)
         home.add(roomContainer)
 
+        let roomLabel = createTextMesh(room.name, room.color)
+        roomLabel.position.x = roomContainer.position.x
+        roomLabel.position.y = roomContainer.position.y
+        roomLabel.position.z = roomZ
+        roomLabel.renderOrder = 5000
+        // not yet
+        // homeContainer.add(roomLabel)
+
         minX = Math.min(minX, room.x)
         minY = Math.min(minY, room.y)
         minZ = Math.min(minZ, roomZ)