diff --git a/script.js b/script.js index 5bac8f9..01c3289 100644 --- a/script.js +++ b/script.js @@ -20,7 +20,7 @@ let metrics = { } const scene = new THREE.Scene() -const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) +const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 1000 ) let homeContainer = new THREE.Group() scene.add(homeContainer) let home = new THREE.Group() @@ -66,7 +66,7 @@ homeContainer.rotation.x = 0.6 * (-Math.PI / 2) // Returns the first child (or container) whose name matches function childWithName(container, name) { if (container.userData.name == name) { - return container; + return container } for (var child of container.children) { let childMatches = childWithName(child, name) @@ -86,14 +86,15 @@ 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 updatedEntities = areasWithEntitiesToUpdate[area] + // plh-evil: use these somehow? let areaContainer = childWithName(scene, area) let box = childWithName(areaContainer, "box") @@ -147,20 +148,24 @@ animate() function createTextMesh(text, colorName) { let canvas = document.createElement('canvas') let context = canvas.getContext('2d') + let font = '144px monospace' context.textAlign = "center" - context.textBaseline = "middle" - context.font = '144pt sans-serif' + context.font = font let size = context.measureText(text) - let height = context.measureText('M').width + let height = context.measureText('M').width * 1.5 size.height = height - let canvasScale = 0.1 - canvas.width = size.width * canvasScale * 0.6 + let canvasScale = 1 + canvas.width = size.width * canvasScale canvas.height = size.height * canvasScale + context.font = font + + console.log([canvas.width, canvas.height]) + context.fillStyle = colorName - context.fillText(text, 5, 10) + context.fillText(text, 0, 100) let texture = new THREE.CanvasTexture(canvas) texture.needsUpdate = true @@ -170,7 +175,7 @@ function createTextMesh(text, colorName) { material.transparent = true material.depthTest = false - let scaleFactor = 0.05 + let scaleFactor = 0.005 let plane = new THREE.PlaneGeometry(canvas.width * scaleFactor, canvas.height * scaleFactor) let mesh = new THREE.Mesh(plane, material) @@ -192,7 +197,7 @@ function updateWithHAData(data) { let sortedAreaNames = areaNames sortedAreaNames.sort(function(a, b) { - return b.length - a.length; + return b.length - a.length }) for (var entity of data) {