jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rsplat): fix GLB viewer not rendering on mobile 

Defer initThreeViewer to next animation frame so the DOM has laid out
before reading container dimensions. Fall back to viewport size instead
of hardcoded 800x600 when container reports zero dimensions. Add proper
MIME types for GLB/GLTF file serving.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-16 23:15:24 +00:00
parent 2ea6fee951
commit 7da90088c4
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
modules/rsplat/components/folk-splat-viewer.ts
View File

@ -791,7 +791,7 @@ export class FolkSplatViewer extends HTMLElement {
// Download handler
this.querySelector("#splat-download-btn")?.addEventListener("click", () => this.downloadModel());
this.initThreeViewer();
requestAnimationFrame(() => this.initThreeViewer());
}
private async downloadModel() {
@ -997,8 +997,12 @@ export class FolkSplatViewer extends HTMLElement {
const { OrbitControls } = await import("three/addons/controls/OrbitControls.js");
const { GLTFLoader } = await import("three/addons/loaders/GLTFLoader.js");
const w = container.clientWidth || 800;
const h = container.clientHeight || 600;
// Wait for layout if container has no dimensions yet
if (!container.clientWidth || !container.clientHeight) {
await new Promise((r) => requestAnimationFrame(r));
}
const w = container.clientWidth || window.innerWidth;
const h = container.clientHeight || (window.innerHeight - 56);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f0f14);

2
server/index.ts
View File

@ -196,7 +196,7 @@ app.get("/data/files/generated/:filename", async (c) => {
const file = Bun.file(filePath);
if (!(await file.exists())) return c.notFound();
const ext = filename.split(".").pop() || "";
const mimeMap: Record<string, string> = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", webp: "image/webp" };
const mimeMap: Record<string, string> = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", webp: "image/webp", glb: "model/gltf-binary", gltf: "model/gltf+json" };
return new Response(file, { headers: { "Content-Type": mimeMap[ext] || "application/octet-stream", "Cache-Control": "public, max-age=86400" } });
});