broken account, please ignore - migrating
see also https://tympanus.net/codrops/2021/10/04/creating-3d-characters-in-three-js/ for cute thins
demo = {
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, 5 * Math.sin(now), 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.
