const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); let homeContainer = new THREE.Group() scene.add(homeContainer) let home = new THREE.Group() homeContainer.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 = 25 // flip home on x axis home.rotation.x = Math.PI // Rotate container a bit for comfort homeContainer.rotation.x = 0.6 * (-Math.PI / 2) function animate() { requestAnimationFrame( animate ); homeContainer.rotation.z += 0.005; renderer.render( scene, camera ); }; animate(); function setPosition(mesh, x, y, z, w, h, d) { // position sets the *center* position // our coordinates are top/left/bottom let meshX = x + w/2 let meshY = y + h/2 let meshZ = z - d/2 mesh.position.x = meshX mesh.position.y = meshY mesh.position.z = meshZ } function configureScene(data) { var minX = 1000 var maxX = -1000 var minY = minX var maxY = maxX // Add geometry for the rooms for (var room of data.rooms) { 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) setPosition(roomMesh, room.x, room.y, room.z || 0, room.w, room.h, room.d) roomMesh.userData = room.name home.add(roomMesh) minX = Math.min(minX, room.x) minY = Math.min(minY, room.y) maxX = Math.max(maxX, room.x + room.w) maxY = Math.max(maxY, room.y + room.h) } let xExtent = maxX - minX let yExtent = maxY - minY home.position.x = -1 * (xExtent / 2) home.position.y = +1 * (yExtent / 2) } async function doLoad() { let request = new Request('data.json'); fetch(request) .then(response => { return response.json() }) .then(json => { configureScene(json) }) } doLoad();