{
const threelet = new Threelet({
canvas: document.getElementById('canvas'),
optAxes: false,
optVR: true,
optVRAppendButtonTo: div,
});
// https://github.com/observablehq/stdlib#invalidation
invalidation.then(() => threelet.dispose());
threelet.setup('mod-controls', THREE.OrbitControls);
threelet.scene.add(new THREE.GridHelper(10, 20));
const cube = new THREE.Mesh(
new THREE.BoxGeometry(0.5, 0.5, 0.5),
new THREE.MeshBasicMaterial({color: 0xff00ff}));
cube.position.set(0, 1, -2);
threelet.scene.add(cube);
threelet.render(); // first time; passive rendering per mouse interaction
return threelet;
}
THREE = {
const THREE = window.THREE = await require("three@0.112/build/three.min.js");
await require("three@0.112/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
Threelet = {
const _THREE = THREE; // this ensures THREE is resolved first.
return (await require(`threelet@0.10.0/dist/threelet.esm.min.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.
