Browse Source

Add colors to all the rooms

master
Peter Hajas 3 years ago
parent
commit
5c54c6bf2b
  1. 9
      data.json
  2. 34
      script.js

9
data.json

@ -5,21 +5,24 @@
"x" : 4.9784, "x" : 4.9784,
"y" : 0, "y" : 0,
"w" : 5.385, "w" : 5.385,
"h" : 4.37 "h" : 4.37,
"color" : "yellow"
}, },
{ {
"name" : "Dining Room", "name" : "Dining Room",
"x" : 0, "x" : 0,
"y" : 4.6736, "y" : 4.6736,
"w" : 4.9774, "w" : 4.9774,
"h" : 3.7338 "h" : 3.7338,
"color" : "red"
}, },
{ {
"name" : "Patio", "name" : "Patio",
"x" : 0, "x" : 0,
"y" : 0.6096, "y" : 0.6096,
"w" : 4.9774, "w" : 4.9774,
"h" : 4.6736 "h" : 4.6736,
"color" : "green"
} }
] ]
} }

34
script.js

@ -1,34 +1,46 @@
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 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(); const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement ); 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) const light = new THREE.AmbientLight(0xFFAAAA, 1)
light.position.z = 10 light.position.z = 100
scene.add(light) 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() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
cube.rotation.x += 0.01; home.rotation.z += 0.005;
cube.rotation.y += 0.01;
renderer.render( scene, camera ); renderer.render( scene, camera );
}; };
animate(); 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() { async function doLoad() {
let request = new Request('data.json'); let request = new Request('data.json');
fetch(request) fetch(request)
@ -36,7 +48,7 @@ async function doLoad() {
return response.json() return response.json()
}) })
.then(json => { .then(json => {
console.log(json) configureScene(json)
}) })
} }

Loading…
Cancel
Save