Browse Source

add metrics for animations and stuff

master
Peter Hajas 3 years ago
parent
commit
6398aa33b5
  1. 13
      script.js

13
script.js

@ -1,5 +1,12 @@
let haStateURL = "http://beacon:1880/ha_state" let haStateURL = "http://beacon:1880/ha_state"
let metrics = {
roomDefaultOpacity : 0.15,
roomHighlightOpacity : 0.6,
roomHighlightDuration : 0.3,
roomUnhighlightDuration: 0.3
}
const scene = new THREE.Scene() const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
let homeContainer = new THREE.Group() let homeContainer = new THREE.Group()
@ -59,10 +66,10 @@ function animate() {
let box = childWithName(areaContainer, "box") let box = childWithName(areaContainer, "box")
let fadeIn = new TWEEN.Tween(box.material) let fadeIn = new TWEEN.Tween(box.material)
.to( { opacity: 1.0 }, 1000) .to( { opacity: metrics.roomHighlightOpacity }, metrics.roomHighlightDuration * 1000)
let fadeOut = new TWEEN.Tween(box.material) let fadeOut = new TWEEN.Tween(box.material)
.to( { opacity: 0.1 }, 1000) .to( { opacity: metrics.roomDefaultOpacity }, metrics.roomUnhighlightDuration * 1000)
fadeIn.chain(fadeOut) fadeIn.chain(fadeOut)
fadeIn.start() fadeIn.start()
@ -187,7 +194,7 @@ function configureScene(data) {
let roomColor = new THREE.Color(room.color) let roomColor = new THREE.Color(room.color)
let roomBoxMaterial = new THREE.MeshPhysicalMaterial({ color: roomColor }) let roomBoxMaterial = new THREE.MeshPhysicalMaterial({ color: roomColor })
roomBoxMaterial.transparent = true roomBoxMaterial.transparent = true
roomBoxMaterial.opacity = 0.1 roomBoxMaterial.opacity = metrics.roomDefaultOpacity
let roomMesh = new THREE.Mesh(roomGeo, roomBoxMaterial) let roomMesh = new THREE.Mesh(roomGeo, roomBoxMaterial)
roomMesh.userData.name = "box" roomMesh.userData.name = "box"
roomContainer.add(roomMesh) roomContainer.add(roomMesh)

Loading…
Cancel
Save