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 = 25 // 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 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) { // 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) } } async function doLoad() { let request = new Request('data.json'); fetch(request) .then(response => { return response.json() }) .then(json => { configureScene(json) }) } doLoad();