Some labels on rooms

script.js

@@ -63,7 +63,12 @@ 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 areaContainer = childWithName(scene, area)
@@ -75,6 +80,7 @@ function animate() {
 
         let fadeOut = new TWEEN.Tween(box.material)
         .easing(metrics.animationCurve)
+        .delay(1000)
         .to( { opacity: metrics.roomDefaultOpacity }, metrics.roomUnhighlightDuration * 1000)
 
         // This will rotate to the area that has a change
@@ -82,10 +88,22 @@ function animate() {
         .easing(metrics.animationCurve)
         .to( { z: areaData[area].angle }, 2000 )
 
-        rotate.chain(fadeIn)
+        let label = childWithName(scene, area + "LABEL")
+
+        let labelScaleIn = new TWEEN.Tween(label.material)
+        .easing(metrics.animationCurve)
+        .to( { opacity: 1.0 }, 500)
+
+        let labelScaleOut = new TWEEN.Tween(label.material)
+        .delay(1000)
+        .easing(metrics.animationCurve)
+        .to( { opacity: 0.0 }, 500)
+
+        rotate.chain(fadeIn, labelScaleIn)
         fadeIn.chain(fadeOut)
-        rotate.start()
+        labelScaleIn.chain(labelScaleOut)
 
+        rotate.start()
     }
 
     // homeContainer.rotation.z += 0.003
@@ -100,7 +118,6 @@ function createTextMesh(text, colorName) {
     let context = canvas.getContext('2d')
     context.textAlign = "center"
     context.textBaseline = "middle"
-    context.fillStyle = colorName
     context.font = '144pt sans-serif'
 
     let size = context.measureText(text)
@@ -111,11 +128,7 @@ function createTextMesh(text, colorName) {
     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.fillStyle = colorName
     context.fillText(text, 5, 10)
 
     let texture = new THREE.CanvasTexture(canvas)
@@ -124,6 +137,7 @@ function createTextMesh(text, colorName) {
         map: texture
     })
     material.transparent = true
+    material.depthTest = false
 
     let scaleFactor = 0.05
 
@@ -231,6 +245,7 @@ function configureScene(data) {
 
         let roomEdgesGeo = new THREE.EdgesGeometry(roomGeo)
         let roomLinesMaterial = new THREE.LineBasicMaterial({ color: roomColor })
+        roomLinesMaterial.transparent = true
         roomLinesMaterial.linewidth = 3
         let roomLines = new THREE.LineSegments(roomEdgesGeo, roomLinesMaterial)
         roomLines.userData.name = "lines"
@@ -242,12 +257,10 @@ function configureScene(data) {
         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)
+        roomLabel.material.opacity = 0
+        roomLabel.userData.name = room.name + "LABEL"
+
+        roomContainer.add(roomLabel)
 
         minX = Math.min(minX, room.x)
         minY = Math.min(minY, room.y)
@@ -321,6 +334,14 @@ function configureScene(data) {
 
         // update in areaData
         areaData[room.name].angle = angle - Math.PI/2
+
+        // position label
+        let label = childWithName(scene, room.name + "LABEL")
+        let radiusForLabel = radiusXY
+
+        label.position.x += (unitX * 6)
+        label.position.y += (unitY * 6)
+        label.position.z += (unitZ * 6)
     }
 }