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) }) }