Initial Upload

index.html

@@ -1,19 +1,22 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>3DGS Viewer</title>
+    <link rel="stylesheet" href="style.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://esm.sh/three@0.179.0",
+          "three/addons/": "https://esm.sh/three@0.179.0/examples/jsm/",
+          "@sparkjsdev/spark": "https://esm.sh/@sparkjsdev/spark@2?deps=three@0.179.0"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="loading">loading...</div>
+    <script type="module" src="src/viewer.js"></script>
+  </body>
 </html>

src/config.js

@@ -0,0 +1,9 @@
+export const SPLAT_URL =
+  "https://huggingface.co/datasets/dynamic-maps/hard-intersection-multimodal-sample/resolve/main/assets/jp_tokyo_takanawadai-lod.rad"
+export const config = {
+  position: [0, 0, 0],
+  quaternion: [0, 0, 0, 1],
+  scale: 1,
+  camera: { position: [0, 0, 10], lookAt: [0, 0, 0] },
+  background: "#000000",
+};

src/controls.js

@@ -0,0 +1,84 @@
+import * as THREE from "three";
+
+const LOOK_SPEED = 0.003;
+const _yawQ = new THREE.Quaternion();
+const _pitQ = new THREE.Quaternion();
+const raycaster = new THREE.Raycaster();
+const _ndc = new THREE.Vector2();
+
+function raycastAt(mesh, camera, clientX, clientY) {
+  _ndc.set((clientX / innerWidth) * 2 - 1, -(clientY / innerHeight) * 2 + 1);
+  raycaster.setFromCamera(_ndc, camera);
+  const hits = [];
+  mesh.raycast(raycaster, hits);
+  hits.sort((a, b) => a.distance - b.distance);
+  return hits[0] ?? null;
+}
+
+export function setupControls(domElement, camera, mesh) {
+  let dragging = false,
+    dragButton = 0,
+    lastX = 0,
+    lastY = 0;
+
+  domElement.addEventListener("pointerdown", (e) => {
+    dragging = true;
+    dragButton = e.button;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    domElement.setPointerCapture(e.pointerId);
+  });
+
+  domElement.addEventListener("pointermove", (e) => {
+    if (!dragging) return;
+    const dx = e.clientX - lastX,
+      dy = e.clientY - lastY;
+    lastX = e.clientX;
+    lastY = e.clientY;
+
+    if (dragButton === 0) {
+      // Left-drag: look around
+      const camUp = new THREE.Vector3(0, 1, 0).applyQuaternion(
+        camera.quaternion,
+      );
+      camera.quaternion.premultiply(
+        _yawQ.setFromAxisAngle(camUp, -dx * LOOK_SPEED),
+      );
+      const camRight = new THREE.Vector3(1, 0, 0).applyQuaternion(
+        camera.quaternion,
+      );
+      camera.quaternion.premultiply(
+        _pitQ.setFromAxisAngle(camRight, -dy * LOOK_SPEED),
+      );
+      camera.quaternion.normalize();
+    } else if (dragButton === 2) {
+      // Right-drag: pan
+      const hit = raycastAt(mesh, camera, lastX, lastY);
+      const panSpeed = (hit ? hit.distance : 5) * 0.001;
+      const right = new THREE.Vector3(1, 0, 0).applyQuaternion(
+        camera.quaternion,
+      );
+      const up = new THREE.Vector3(0, 1, 0).applyQuaternion(camera.quaternion);
+      camera.position.addScaledVector(right, -dx * panSpeed);
+      camera.position.addScaledVector(up, dy * panSpeed);
+    }
+  });
+
+  domElement.addEventListener("pointerup", () => {
+    dragging = false;
+  });
+  domElement.addEventListener("contextmenu", (e) => e.preventDefault());
+
+  domElement.addEventListener(
+    "wheel",
+    (e) => {
+      const hit = raycastAt(mesh, camera, e.clientX, e.clientY);
+      const dist = hit ? hit.distance : 10;
+      camera.position.addScaledVector(
+        raycaster.ray.direction,
+        -(dist * e.deltaY * 0.001),
+      );
+    },
+    { passive: true },
+  );
+}

src/viewer.js

@@ -0,0 +1,56 @@
+import * as THREE from "three";
+import { SparkRenderer, SplatMesh } from "@sparkjsdev/spark";
+import { SPLAT_URL, config } from "./config.js";
+import { setupControls } from "./controls.js";
+
+const loadingEl = document.getElementById("loading");
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(config.background);
+
+const camera = new THREE.PerspectiveCamera(
+  75,
+  innerWidth / innerHeight,
+  0.01,
+  1000000,
+);
+camera.position.set(...config.camera.position);
+camera.lookAt(...config.camera.lookAt);
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setPixelRatio(devicePixelRatio);
+renderer.setSize(innerWidth, innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const spark = new SparkRenderer({
+  renderer,
+  pagedExtSplats: true,
+  coneFov0: 70.0,
+  coneFov: 120.0,
+  behindFoveate: 0.2,
+  coneFoveate: 0.4,
+});
+scene.add(spark);
+
+const mesh = new SplatMesh({ url: SPLAT_URL, paged: true, raycastable: true });
+mesh.quaternion.set(...config.quaternion);
+mesh.position.set(...config.position);
+mesh.scale.setScalar(config.scale);
+scene.add(mesh);
+
+setupControls(renderer.domElement, camera, mesh);
+
+window.addEventListener("resize", () => {
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth, innerHeight);
+});
+
+let firstFrame = true;
+renderer.setAnimationLoop(() => {
+  renderer.render(scene, camera);
+  if (firstFrame) {
+    firstFrame = false;
+    loadingEl.classList.add("done");
+  }
+});

style.css

@@ -1,28 +1,29 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  background: #111;
+  overflow: hidden;
 }
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+canvas {
+  display: block;
+  touch-action: none;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+#loading {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #111;
+  color: rgba(255, 255, 255, 0.4);
+  font: 12px monospace;
+  z-index: 100;
+  transition: opacity 0.4s;
 }
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
+#loading.done {
+  opacity: 0;
+  pointer-events: none;
 }