hypercross/tts-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 3D object viewers with r3f stack

Browse Source 
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.
This commit is contained in:
hypercross
2026-08-08 12:56:46 +08:00
parent f390f170da
commit 001d5eeb54
18 changed files with 1037 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/decisions.md
+30 -1
View File
@@ -128,4 +128,33 @@ without coupling the page to any one viewer.
**Alternatives considered:** A single monolithic inspector component. Rejected —
would grow unboundedly as per-class viewers are added; the registry keeps each
viewer isolated and swappable.
viewer isolated and swappable.
## D11 — 3D viewers on the r3f/drei/postprocessing stack
**Decision:** Per-class 3D viewers for tiles, tokens, cards, and custom models
are built on `@react-three/fiber`, `@react-three/drei`, and
`@react-three/postprocessing`, registered through the existing viewer registry
and lazy-loaded so the three.js stack is code-split out of the main bundle.
**Context:** The user wants to visualize objects in a save in 3D. The viewer
registry (D10) already provides the extension point. Custom models load from
`CustomMesh.MeshURL` (GLTF/OBJ/FBX); tiles/tokens/cards use their
`CustomImage`/`CustomDeck` textures. Unity asset bundles are out of scope.
**Alternatives considered:** A single monolithic 3D inspector; a WebGL library
other than three.js. Rejected — the registry keeps viewers isolated, and r3f is
the de-facto React/three.js integration.
## D12 — CORS-safe asset proxy
**Decision:** The proxy exposes `GET /asset?url=...`, which fetches an external
asset and streams it back with a `Content-Type` header. Only `http(s)` URLs are
allowed.
**Context:** Workshop asset hosts (steamusercontent.com, etc.) often omit CORS
headers, which would block three.js `TextureLoader` / `GLTFLoader` in the
browser. Routing asset fetches through the proxy makes them loadable.
**Alternatives considered:** Loading assets directly in the browser. Rejected —
CORS failures on common Workshop hosts would break the viewers.