Browse Source

add (not working) text label to the scene

master
Peter Hajas 3 years ago
parent
commit
b4833c05a9
  1. 17
      script.js

17
script.js

@ -37,7 +37,7 @@ function animate() {
animate() animate()
function createTextMesh(text) { function createTextMesh(text, colorName) {
let canvas = document.createElement('canvas') let canvas = document.createElement('canvas')
let context = canvas.getContext('2d') let context = canvas.getContext('2d')
let size = context.measureText(text) let size = context.measureText(text)
@ -45,7 +45,7 @@ function createTextMesh(text) {
canvas.height = 100 canvas.height = 100
context.textAlign = "center" context.textAlign = "center"
context.textBaseline = "middle" context.textBaseline = "middle"
context.fillStyle = "blue" context.fillStyle = colorName
context.font = '24pt sans-serif' context.font = '24pt sans-serif'
context.fillText(text, 50, 50) context.fillText(text, 50, 50)
@ -56,7 +56,7 @@ function createTextMesh(text) {
}) })
material.transparent = true material.transparent = true
let plane = new THREE.PlaneGeometry(5, 5) let plane = new THREE.PlaneGeometry(3, 3)
let mesh = new THREE.Mesh(plane, material) let mesh = new THREE.Mesh(plane, material)
return mesh return mesh
@ -92,8 +92,6 @@ function updateWithHAData(data) {
} }
} }
} }
console.log(areasToEntities)
} }
async function loadHAData() { async function loadHAData() {
@ -137,14 +135,19 @@ function configureScene(data) {
roomBoxMaterial.transparent = true roomBoxMaterial.transparent = true
roomBoxMaterial.opacity = 0.3 roomBoxMaterial.opacity = 0.3
let roomMesh = new THREE.Mesh(roomGeo, roomBoxMaterial) let roomMesh = new THREE.Mesh(roomGeo, roomBoxMaterial)
roomMesh.userData = "box"
roomContainer.add(roomMesh) roomContainer.add(roomMesh)
let roomEdgesGeo = new THREE.EdgesGeometry(roomGeo) let roomEdgesGeo = new THREE.EdgesGeometry(roomGeo)
let roomLinesMaterial = new THREE.LineBasicMaterial({ color: roomColor }) let roomLinesMaterial = new THREE.LineBasicMaterial({ color: roomColor })
let roomLines = new THREE.LineSegments(roomEdgesGeo, roomLinesMaterial) let roomLines = new THREE.LineSegments(roomEdgesGeo, roomLinesMaterial)
roomLines.userData = "lines"
roomContainer.add(roomLines) roomContainer.add(roomLines)
let roomLabel = createTextMesh("test", "red")
roomLabel.userData = "label"
roomContainer.add(roomLabel)
setPosition(roomContainer, room.x, room.y, room.z || 0, room.w, room.h, room.d) setPosition(roomContainer, room.x, room.y, room.z || 0, room.w, room.h, room.d)
home.add(roomContainer) home.add(roomContainer)
@ -158,8 +161,6 @@ function configureScene(data) {
let yExtent = maxY - minY let yExtent = maxY - minY
home.position.x = -1 * (xExtent / 2) home.position.x = -1 * (xExtent / 2)
home.position.y = +1 * (yExtent / 2) home.position.y = +1 * (yExtent / 2)
// homeContainer.add(createTextMesh("test"))
} }
async function loadHomeData() { async function loadHomeData() {

Loading…
Cancel
Save