let haStateURL = "http://beacon:1880/ha_state" const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) let homeContainer = new THREE.Group() scene.add(homeContainer) let home = new THREE.Group() homeContainer.add(home) var areaNames = [ ] const renderer = new THREE.WebGLRenderer() renderer.setSize( window.innerWidth, window.innerHeight ) document.body.appendChild( renderer.domElement ) const light = new THREE.AmbientLight(0xFFAAAA, 1) // light.position.z = 100 scene.add(light) // back the camera up camera.position.z = 25 // flip home on x axis home.rotation.x = Math.PI // Rotate container a bit for comfort homeContainer.rotation.x = 0.6 * (-Math.PI / 2) function animate() { requestAnimationFrame( animate ) homeContainer.rotation.z += 0.005 renderer.render( scene, camera ) } animate() function updateWithHAData(data) { // `data` is an array of entities. loop through and group by area var areasToEntities = { } for (var area of areaNames) { areasToEntities[area] = new Array() } let sortedAreaNames = areaNames sortedAreaNames.sort(function(a, b) { return b.length - a.length; }) for (var entity of data) { let id = entity.entity_id let friendlyName = entity.attributes.friendly_name || entity.entity_id for (var area of sortedAreaNames) { let matchesUnderscored = id.includes(area.toLowerCase().replace(' ','_')) let matchesNoSpaces = id.includes(area.toLowerCase().replace(' ','')) let matchesFriendlyName = friendlyName.includes(area) let matches = matchesUnderscored || matchesNoSpaces || matchesFriendlyName if (matches) { let areaEntities = areasToEntities[area] areaEntities.push(entity) areasToEntities[area] = areaEntities break } } } console.log(areasToEntities) } async function loadHAData() { let request = new Request(haStateURL) fetch(request) .then(response => { return response.json() }) .then(json => { updateWithHAData(json) }) } function setPosition(mesh, x, y, z, w, h, d) { // position sets the *center* position // our coordinates are top/left/bottom let meshX = x + w/2 let meshY = y + h/2 let meshZ = -z - d/2 mesh.position.x = meshX mesh.position.y = meshY mesh.position.z = meshZ } function configureScene(data) { var minX = 1000 var maxX = -1000 var minY = minX var maxY = maxX // Add geometry for the rooms for (var room of data.rooms) { areaNames.push(room.name) let roomContainer = new THREE.Group() roomContainer.userData = room.name let roomGeo = new THREE.BoxGeometry(room.w, room.h, room.d) let roomColor = new THREE.Color(room.color) let roomBoxMaterial = new THREE.MeshPhysicalMaterial({ color: roomColor }) roomBoxMaterial.transparent = true roomBoxMaterial.opacity = 0.3 let roomMesh = new THREE.Mesh(roomGeo, roomBoxMaterial) roomContainer.add(roomMesh) let roomEdgesGeo = new THREE.EdgesGeometry(roomGeo) let roomLinesMaterial = new THREE.LineBasicMaterial({ color: roomColor }) let roomLines = new THREE.LineSegments(roomEdgesGeo, roomLinesMaterial) roomContainer.add(roomLines) setPosition(roomContainer, room.x, room.y, room.z || 0, room.w, room.h, room.d) home.add(roomContainer) minX = Math.min(minX, room.x) minY = Math.min(minY, room.y) maxX = Math.max(maxX, room.x + room.w) maxY = Math.max(maxY, room.y + room.h) } let xExtent = maxX - minX let yExtent = maxY - minY home.position.x = -1 * (xExtent / 2) home.position.y = +1 * (yExtent / 2) } async function loadHomeData() { let request = new Request('data.json') fetch(request) .then(response => { return response.json() }) .then(json => { configureScene(json) // Kick off first HA load loadHAData() }) } loadHomeData()