latlng = {
//const ll = [36.3928, -112.6304]; // Colorado River
const ll = [45.9764, 7.6585]; // Matterhorn
//const ll = [32.8861, 131.0819]; // Mount Aso
//const ll = [40.8038, 14.3981]; // Vesuvio
return ll;
}
{
const renderer = new THREE.WebGLRenderer({antialias: true});
const controls = new THREE.OrbitControls(camera, renderer.domElement);
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
invalidation.then(() => (controls.dispose(), renderer.dispose(), clearScene()));
const render = () => { renderer.render(scene, camera); };
controls.addEventListener("change", render);
render(); // first time
// https://github.com/w3reality/three-geo#usage
const tgeo = new ThreeGeo({
tokenMapbox: tgeoParams.token,
});
tgeo.getTerrain(latlng, tgeoParams.radius, tgeoParams.zoom, {
//onRgbDem: (meshes) => {
// meshes.forEach((mesh) => { scene.add(mesh); });
// render();
//},
//onSatelliteMat: (mesh) => {
// render();
//},
onVectorDem: (objs) => { // type is either Mesh or Line
objs.forEach((obj) => { scene.add(obj); });
render();
},
});
return renderer.domElement;
}
clearScene = () => {
// clear the scene in case of re-evaluation of notebook
// https://stackoverflow.com/questions/35060831/how-to-remove-all-mesh-objects-from-the-scene-in-three-js
console.log('scene:', scene);
for (let i = scene.children.length - 1; i >= 0; i--) {
let ch = scene.children[i];
if (ch.type === "Mesh" || ch.type === "Line") {
scene.remove(ch);
ch.geometry.dispose();
ch.material.dispose();
}
}
}
THREE = {
const THREE = window.THREE = await require("three@0.96/build/three.min.js");
await require("three@0.96/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
ThreeGeo = {
const _THREE = THREE; // just to ensure THREE is resolved first by notebook...
return (await require(`three-geo@1.4.2/dist/three-geo.esm.compat.js`)).default;
}
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.
