diff --git a/script.js b/script.js index 3547a26..d6793bc 100644 --- a/script.js +++ b/script.js @@ -4,7 +4,8 @@ let metrics = { roomDefaultOpacity : 0.15, roomHighlightOpacity : 0.6, roomHighlightDuration : 0.3, - roomUnhighlightDuration: 0.3 + roomUnhighlightDuration: 0.3, + animationCurve : TWEEN.Easing.Cubic.InOut } const scene = new THREE.Scene() @@ -14,7 +15,7 @@ scene.add(homeContainer) let home = new THREE.Group() homeContainer.add(home) -var areaNames = [ ] +var areaData = { } var areasWithEntitiesToUpdate = { } @@ -68,13 +69,21 @@ function animate() { let box = childWithName(areaContainer, "box") let fadeIn = new TWEEN.Tween(box.material) + .easing(metrics.animationCurve) .to( { opacity: metrics.roomHighlightOpacity }, metrics.roomHighlightDuration * 1000) let fadeOut = new TWEEN.Tween(box.material) + .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() } homeContainer.rotation.z += 0.003 @@ -114,9 +123,12 @@ function updateWithHAData(data) { // `data` is an array of entities. loop through and group by area var areasToEntities = { } var areasToUpdatedEntities = { } - for (var area of areaNames) { - areasToEntities[area] = new Array() - areasToUpdatedEntities[area] = new Array() + var areaNames = new Array() + for (var area of areaData.rooms) { + let name = area.name + areaNames.push(area.name) + areasToEntities[name] = new Array() + areasToUpdatedEntities[name] = new Array() } let sortedAreaNames = areaNames @@ -186,9 +198,10 @@ function configureScene(data) { var minY = minX var maxY = maxX + areaData = data + // Add geometry for the rooms for (var room of data.rooms) { - areaNames.push(room.name) let roomContainer = new THREE.Group() roomContainer.userData.name = room.name