mainLight = {
const light = new THREE.DirectionalLight(0xffffff, 3.0);
light.position.set(10, 10, 10);
return light;
}
Published
Edited
Feb 26, 2020
dom = {
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
renderer.render(scene, camera);
return renderer.domElement;
}
buildings
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
//renderer.setClearColor(0xffffff);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
return renderer;
}
scene = {
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(1);
scene.add(buildings);
scene.add(axesHelper);
scene.add(ambientLight);
scene.add(mainLight);
return scene;
}
ambientLight = {
const light = new THREE.HemisphereLight(0xddeeff, 0x202020, 3);
return light;
}
camera = {
const fov = 45;
const aspect = width/height;
const near = 0.01;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(20, .6, 20);
//camera.lookAt(0,10,0);
return camera;
}
height = 500
{
//buildings.updateMatrixWorld();
const box = new THREE.Box3().setFromObject(buildings);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());
buildings.position.x += (buildings.position.x - center.x);
buildings.position.y += (buildings.position.y - center.y);
buildings.position.z += (buildings.position.z - center.z);
}
buildings = gltf.scene.children[0].children[0]
b3dmurl = 'https://saturnus.geodan.nl/maquette_nl/data/buildingtiles_texel_3857/tiles/442.b3dm'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
