mycelia.blog/static/posts/gsplat/index.js
2024-02-26 06:52:46 -05:00

39 lines
No EOL
1.3 KiB
JavaScript

import * as SPLAT from "https://cdn.jsdelivr.net/npm/gsplat@latest";
const canvas = document.getElementById("canvas");
const progressDialog = document.getElementById("progress-dialog");
const progressIndicator = document.getElementById("progress-indicator");
const loadButton = document.querySelector("#load-button");
const loadingLabel = document.querySelector('#progress-dialog label');
const renderer = new SPLAT.WebGLRenderer(canvas);
const scene = new SPLAT.Scene();
const camera = new SPLAT.Camera();
const controls = new SPLAT.OrbitControls(camera, canvas);
loadButton.addEventListener('click', () => {
loadingLabel.textContent = 'Loading...';
main();
});
async function main() {
const url = "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k-mini.splat";
await SPLAT.Loader.LoadAsync(url, scene, (progress) => (progressIndicator.value = progress * 100));
progressDialog.close();
const handleResize = () => {
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
};
const frame = () => {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(frame);
};
handleResize();
window.addEventListener("resize", handleResize);
requestAnimationFrame(frame);
}