JSFiddle - React, Tailwind, and code Playground

by hirako2000

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>gsplat.js - Viewer Demo</title>
    </head>

    <body>
        <div id="progress-container">
            <dialog open id="progress-dialog">
                <p>
                    <label for="progress-indicator">Loading scene...</label>
                </p>
                <progress max="100" id="progress-indicator"></progress>
            </dialog>
        </div>
    
        <canvas id="canvas"></canvas>
        <script src="index.js" type="module"></script>
    </body>
</html>

CSS

body,
html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
}

canvas {
    width: 100vw;
    height: 100vh;
}

dialog {
    width: 100%;
    text-align: center;
    max-width: 20em;
    color: white;
    background-color: #000;
    border: none;
    position: relative;
    transform: translate(-50%, -50%);
}

#progress-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

progress {
    width: 100%;
    height: 1em;
    border: none;
    background-color: #fff;
    color: #eee;
}

progress::-webkit-progress-bar {
    background-color: #333;
}

progress::-webkit-progress-value {
    background-color: #eee;
}

progress::-moz-progress-bar {
    background-color: #eee;
}

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 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/loopce/gaussiansplats/resolve/main/lamp/models/point_cloud/iteration_30000/point_cloud.splat";

    await SPLAT.Loader.LoadAsync(url, scene, (progress) => progressIndicator.value = progress * 100);
    progressDialog.close();

    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();