Public
Edited
Nov 7, 2023
SPLAT = await import("https://cdn.jsdelivr.net/npm/gsplat@latest")
<canvas id="canvas" height=500px; style="width:500px; height:500px;" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{
const canvas = document.getElementById("canvas");
const renderer = new SPLAT.WebGLRenderer(canvas);
const scene = new SPLAT.Scene();
const camera = new SPLAT.Camera();
const controls = new SPLAT.OrbitControls(camera, canvas);
async function main() {
const url =
"https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k.splat";
await SPLAT.Loader.LoadAsync(url, scene, null);
const handleResize = () => {
renderer.setSize(window.innerWidth, window.innerHeight);
};
const frame = () => {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(frame);
};
handleResize();
window.addEventListener("resize", handleResize);
requestAnimationFrame(frame);
}
main();
}
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.
