fps = {
const fps = 30;
threelet.updateLoop(fps); // active rendering at N fps (N >= 0)
return fps;
}
threelet = {
const threelet = new Threelet({
canvas: canvas,
});
// https://github.com/observablehq/stdlib#invalidation
invalidation.then(() => threelet.dispose());
threelet.setup('mod-controls', THREE.OrbitControls);
threelet.setup('mod-sky', THREE.Sky);
threelet.scene.add(createTestHemisphereLight());
threelet.scene.add(createTestDirectionalLight());
const objs = createTestObjects();
objs.forEach(obj => threelet.scene.add(obj));
threelet.update = (t, dt) => { // implement your scene logic here
objs[0].rotation.x += dt;
objs[1].rotation.y += dt;
objs[2].material.emissive.r = Math.sin(4*t) > 0 ? 1 : 0;
objs[3].position.x = Math.sin(t);
objs[4].position.y = Math.cos(t);
};
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(() => {});
await require("three@0.112/examples/js/objects/Sky.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.
