From 078740b756dada08d865f152d4acd1486f063140 Mon Sep 17 00:00:00 2001
From: Peter Hajas <peter@haj.as>
Date: Sat, 7 May 2022 22:37:34 -0600
Subject: [PATCH] add ability to make text in the scene

---
 script.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/script.js b/script.js
index 54eb35c..deebf04 100644
--- a/script.js
+++ b/script.js
@@ -16,6 +16,7 @@ document.body.appendChild( renderer.domElement )
 const light = new THREE.AmbientLight(0xFFAAAA, 1)
 // light.position.z = 100
 scene.add(light)
+scene.background = new THREE.Color("white")
 
 // back the camera up
 camera.position.z = 25
@@ -36,6 +37,31 @@ function animate() {
 
 animate()
 
+function createTextMesh(text) {
+    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 = "blue"
+    context.font = '24pt sans-serif'
+    context.fillText(text, 50, 50)
+
+    let texture = new THREE.CanvasTexture(canvas)
+    texture.needsUpdate = true
+    let material = new THREE.MeshBasicMaterial({
+        map: texture
+    })
+    material.transparent = true
+
+    let plane = new THREE.PlaneGeometry(5, 5)
+    let mesh = new THREE.Mesh(plane, material)
+
+    return mesh
+}
+
 function updateWithHAData(data) {
     // `data` is an array of entities. loop through and group by area
     var areasToEntities = { }
@@ -132,6 +158,8 @@ function configureScene(data) {
     let yExtent = maxY - minY
     home.position.x = -1 * (xExtent / 2)
     home.position.y = +1 * (yExtent / 2)
+
+    // homeContainer.add(createTextMesh("test"))
 }
 
 async function loadHomeData() {