Add 3D object viewers with r3f stack

Add per-class 3D viewers for tiles, tokens, cards, and custom models
using React Three Fiber, drei, and postprocessing. Viewers are
lazy-loaded and registered through the existing viewer registry, with a
shared scene wrapper for lighting, orbit controls, and subtle effects.

Add a CORS-safe /asset proxy route so three.js loaders can fetch
Workshop-hosted textures and models, and extend TTSObject with the
CustomMesh and CustomTile/CustomToken fields the viewers read.

apps/proxy/src/index.ts

@@ -2,6 +2,7 @@ import { serve } from '@hono/node-server';
 import { cors } from 'hono/cors';
 import { Hono } from 'hono';
 import { loadEnv, type Bindings } from './env.js';
+import asset from './routes/asset.js';
 import health from './routes/health.js';
 import items from './routes/items.js';
 import search from './routes/search.js';
@@ -14,6 +15,7 @@ app.use('*', cors());
 app.route('/health', health);
 app.route('/search', search);
 app.route('/items', items);
+app.route('/asset', asset);
 
 serve(
   {

apps/proxy/src/routes/asset.test.ts

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import asset from './asset.js';
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('asset route', () => {
+  it('rejects a missing url', async () => {
+    const res = await asset.request('/');
+    expect(res.status).toBe(400);
+    expect(await res.json()).toEqual({ error: 'Missing url query param' });
+  });
+
+  it('rejects a non-http url', async () => {
+    const res = await asset.request('/?url=file%3A%2F%2F%2Fetc%2Fpasswd');
+    expect(res.status).toBe(400);
+  });
+
+  it('streams the fetched asset with a content-type header', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(
+        new Response(new Uint8Array([1, 2, 3]), {
+          headers: { 'content-type': 'image/png' },
+        }),
+      ),
+    );
+    const res = await asset.request('/?url=https%3A%2F%2Fexample.com%2Fa.png');
+    expect(res.status).toBe(200);
+    expect(res.headers.get('content-type')).toBe('image/png');
+    expect(await res.arrayBuffer()).toEqual(new Uint8Array([1, 2, 3]).buffer);
+  });
+
+  it('returns 502 when the upstream fetch fails', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue(new Response('error', { status: 500 })),
+    );
+    const res = await asset.request('/?url=https%3A%2F%2Fexample.com%2Fa.png');
+    expect(res.status).toBe(502);
+  });
+});

apps/proxy/src/routes/asset.ts

@@ -0,0 +1,47 @@
+import { Hono } from 'hono';
+
+const app = new Hono();
+
+/**
+ * Fetch an external asset (texture, model, etc.) and stream it back to the
+ * client. Workshop asset hosts (steamusercontent.com, etc.) often omit CORS
+ * headers, which would block `TextureLoader` / `GLTFLoader` in the browser.
+ * Routing through the proxy makes those assets loadable.
+ */
+app.get('/', async (c) => {
+  const raw = c.req.query('url');
+  if (!raw) {
+    return c.json({ error: 'Missing url query param' }, 400);
+  }
+
+  let url: URL;
+  try {
+    url = new URL(raw);
+  } catch {
+    return c.json({ error: 'Invalid url query param' }, 400);
+  }
+  // Only allow http(s) to avoid SSRF via file://, etc.
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+    return c.json({ error: 'Only http(s) urls are allowed' }, 400);
+  }
+
+  let res: Response;
+  try {
+    res = await fetch(url);
+  } catch (err) {
+    return c.json({ error: `Failed to fetch asset: ${String(err)}` }, 502);
+  }
+  if (!res.ok) {
+    return c.json({ error: `Asset responded ${res.status}` }, 502);
+  }
+
+  const contentType = res.headers.get('content-type') ?? 'application/octet-stream';
+  return new Response(res.body, {
+    headers: {
+      'Content-Type': contentType,
+      'Cache-Control': 'public, max-age=86400',
+    },
+  });
+});
+
+export default app;