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 light = new THREE.AmbientLight(0xFFAAAA, 1) light.position.z = 100 scene.add(light) // back the camera up camera.position.z = 15; // transform the home to be a reasonable orientation home.rotation.x = Math.PI * 2/3 function animate() { requestAnimationFrame( animate ); 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) .then(response => { return response.json() }) .then(json => { configureScene(json) }) } doLoad();