Get cool wireframe appearance

script.js

@@ -53,15 +53,23 @@ function configureScene(data) {
     // Add geometry for the rooms
     for (var room of data.rooms) {
         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 roomMaterial = new THREE.MeshPhysicalMaterial({ color: roomColor })
-        let roomMesh = new THREE.Mesh(roomGeo, roomMaterial)
+        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)
-        roomContainer.userData = room.name
         home.add(roomContainer)
 
         minX = Math.min(minX, room.x)