diff --git a/modules/rsplat/components/folk-splat-viewer.ts b/modules/rsplat/components/folk-splat-viewer.ts index 22ce55b..0ac6121 100644 --- a/modules/rsplat/components/folk-splat-viewer.ts +++ b/modules/rsplat/components/folk-splat-viewer.ts @@ -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); diff --git a/server/index.ts b/server/index.ts index ca50c29..1c37130 100644 --- a/server/index.ts +++ b/server/index.ts @@ -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 = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", webp: "image/webp" }; + const mimeMap: Record = { 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" } }); });