From 5c54c6bf2b21ecaaf843058ab4d528ce92701fa3 Mon Sep 17 00:00:00 2001
From: Peter Hajas <peter@haj.as>
Date: Sat, 7 May 2022 15:20:52 -0600
Subject: [PATCH] Add colors to all the rooms

---
 data.json |  9 ++++++---
 script.js | 34 +++++++++++++++++++++++-----------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/data.json b/data.json
index 3f7821b..d2e8810 100644
--- a/data.json
+++ b/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"
         }
     ]
 }
diff --git a/script.js b/script.js
index 270f6fb..316cb7c 100644
--- a/script.js
+++ b/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;
-    cube.rotation.y += 0.01;
+    home.rotation.z += 0.005;
 
     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)
     })
 }