Add colors to all the rooms

data.json

@@ -5,21 +5,24 @@
             "x" : 4.9784,
             "y" : 0,
             "w" : 5.385,
-            "h" : 4.37
+            "h" : 4.37,
+            "color" : "yellow"
         },
         {
             "name" : "Dining Room",
             "x" : 0,
             "y" : 4.6736,
             "w" : 4.9774,
-            "h" : 3.7338
+            "h" : 3.7338,
+            "color" : "red"
         },
         {
             "name" : "Patio",
             "x" : 0,
             "y" : 0.6096,
             "w" : 4.9774,
-            "h" : 4.6736
+            "h" : 4.6736,
+            "color" : "green"
         }
     ]
 }

script.js

@@ -1,34 +1,46 @@
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+const home = new THREE.Group();
+scene.add(home)
 
 const renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );
 
-const geometry = new THREE.BoxGeometry();
-const material = new THREE.MeshPhysicalMaterial( { color: 0x00ff00 } );
-const cube = new THREE.Mesh( geometry, material );
-scene.add( cube );
-
 const light = new THREE.AmbientLight(0xFFAAAA, 1)
-light.position.z = 10
+light.position.z = 100
 scene.add(light)
 
-console.log(scene)
+// back the camera up
+camera.position.z = 15;
 
-camera.position.z = 5;
+// transform the home to be a reasonable orientation
+home.rotation.x = Math.PI * 2/3
 
 function animate() {
     requestAnimationFrame( animate );
 
-    cube.rotation.x += 0.01;
+    home.rotation.z += 0.005;
-    cube.rotation.y += 0.01;
 
     renderer.render( scene, camera );
 };
 
 animate();
 
+function configureScene(data) {
+    // Add geometry for the rooms
+    for (var room of data.rooms) {
+        let roomGeo = new THREE.BoxGeometry(room.w, room.h, 2)
+        let roomColor = new THREE.Color(room.color)
+        let roomMaterial = new THREE.MeshPhysicalMaterial({ color: roomColor })
+        let roomMesh = new THREE.Mesh(roomGeo, roomMaterial)
+        roomMesh.position.x = room.x
+        roomMesh.position.y = room.y
+        roomMesh.userData = room.name
+        home.add(roomMesh)
+    }
+}
+
 async function doLoad() {
     let request = new Request('data.json');
     fetch(request)
@@ -36,7 +48,7 @@ async function doLoad() {
         return response.json()
     })
     .then(json => {
-        console.log(json)
+        configureScene(json)
     })
 }