rotate map to show the area that changes

script.js

@@ -15,6 +15,8 @@ scene.add(homeContainer)
 let home = new THREE.Group()
 homeContainer.add(home)
 
+// key: area name
+// value: info
 var areaData = { }
 var areasWithEntitiesToUpdate = { }
 
@@ -75,17 +77,18 @@ function animate() {
         .easing(metrics.animationCurve)
         .to( { opacity: metrics.roomDefaultOpacity }, metrics.roomUnhighlightDuration * 1000)
 
-        fadeIn.chain(fadeOut)
-        fadeIn.start()
-
         // This will rotate to the area that has a change
         let rotate = new TWEEN.Tween(homeContainer.rotation)
         .easing(metrics.animationCurve)
-        .to( { z: Math.PI }, 2000 )
-        .start()
+        .to( { z: areaData[area].angle }, 2000 )
+
+        rotate.chain(fadeIn)
+        fadeIn.chain(fadeOut)
+        rotate.start()
+
     }
 
-    homeContainer.rotation.z += 0.003
+    // homeContainer.rotation.z += 0.003
 
     renderer.render( scene, camera )
 }
@@ -123,9 +126,8 @@ function updateWithHAData(data) {
     var areasToEntities = { }
     var areasToUpdatedEntities = { }
     var areaNames = new Array()
-    for (var area of areaData.rooms) {
-        let name = area.name
-        areaNames.push(area.name)
+    for (var name of Object.keys(areaData)) {
+        areaNames.push(name)
         areasToEntities[name] = new Array()
         areasToUpdatedEntities[name] = new Array()
     }
@@ -199,12 +201,11 @@ function configureScene(data) {
     var minZ = minX
     var maxZ = maxX
 
-    areaData = data
-
     // Add geometry for the rooms
     for (var room of data.rooms) {
         let roomContainer = new THREE.Group()
         roomContainer.userData.name = room.name
+        areaData[room.name] = room
 
         let roomGeo = new THREE.BoxGeometry(room.w, room.h, room.d)
         let roomColor = new THREE.Color(room.color)
@@ -248,9 +249,62 @@ function configureScene(data) {
     home.position.y = +1 * (yExtent / 2)
     home.position.z = -1 * (zExtent / 2)
 
-    let centerX = minX + (xExtent / 2)
-    let centerY = minY + (yExtent / 2)
-    let centerZ = minZ + (zExtent / 2)
+    let homeCenterX = minX + (xExtent / 2)
+    let homeCenterY = minY + (yExtent / 2)
+    let homeCenterZ = minZ + (zExtent / 2)
+
+    for (var room of data.rooms) {
+        let name = room.name
+        let centerX = room.x + room.w / 2
+        let centerY = room.y + room.h / 2
+        let centerZ = (room.z || 0) + room.d / 2
+
+        let unitX = (centerX - homeCenterX) / (xExtent / 2)
+        let unitY = (centerY - homeCenterY) / (yExtent / 2)
+        let unitZ = (centerZ - homeCenterZ) / (zExtent / 2)
+
+        let radiusXY = Math.sqrt(unitX * unitX + unitY * unitY)
+        unitX *= (1.0 / radiusXY)
+        unitY *= (1.0 / radiusXY)
+
+        // Compute rotations
+        let angleX = Math.acos(unitX)
+        let angleY = Math.asin(unitY)
+        let angle = 0
+
+        if (unitX > 0 && unitY > 0) {
+            // First quadrant
+            if (angleX < Math.PI/2) {
+                angle = angleX
+            } else {
+                angle = angleY
+            }
+        } else if (unitX < 0 && unitY > 0) {
+            // Second quadrant
+            if (angleX > Math.PI/2 && angleX < Math.PI) {
+                angle = angleX
+            } else {
+                angle = angleY
+            }
+        } else if (unitX < 0 && unitY < 0) {
+            // Third quadrant
+            if (angleX > Math.PI && angleX < Math.PI * 1.5) {
+                angle = angleX
+            } else {
+                angle = angleY
+            }
+        } else {
+            // Fourth quadrant
+            if (angleX > Math.PI * 1.5 && angleX < Math.PI * 2) {
+                angle = angleX
+            } else {
+                angle = angleY
+            }
+        }
+
+        // update in areaData
+        areaData[room.name].angle = angle - Math.PI/2
+    }
 }
 
 async function loadHomeData() {