house_map/script.js

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();