Case study · SPATIAL · 2607.SPT.04
Antarang: a walkable 3D museum of Indian and world art
How do you build a walkable 3D museum on the web with React Three Fiber?
Antarang is a walkable first-person museum in the browser, built with React Three Fiber: a zoomable time-river puts Indian art (below the axis) and world art (above it) on one shared timeline, and gold markers open era-specific 3D galleries you walk through with WASD and mouse-look. Every artwork and fact comes from Wikipedia and Wikimedia Commons — nothing is invented.

- Periods
- 24
- Artists
- 30+
- Data source
- Wikipedia / Wikimedia Commons only
- Target
- 60 fps in-gallery
- Stack
- Next.js · React Three Fiber · Three.js · drei · postprocessing · Zustand · Drizzle · Neon
01The problem it solves
Indian art history usually appears in world-art timelines as a footnote. Antarang's premise is that it belongs on the same axis — Indus Valley to the Progressive Artists' Group alongside the Renaissance to Modernism — and that the way to feel that is to walk through it.
02What he built
A time-river, then a museum
A horizontal, drag-to-pan, zoomable timeline: World above, India below, 24 periods, 30+ artists and 25 public-domain artworks in the verified catalogue. Gold pulsing dots are walkable museums; any artwork opens a zoom-and-pan inspect view with its story, significance and sources.
Era-specific 3D galleries
Sandstone temple halls with pillars for Indian dynasties, a warm salon for Old Masters, a white cube for the moderns — with PBR materials, a reflective floor, per-artwork spotlights, soft shadows, bloom and ACES tone mapping, plus a guided auto-tour that flies the camera to each work.
Data you can trust
A seed script resolves each artwork's canonical image, licence and credit from the Wikimedia Commons API into Neon Postgres (via Drizzle); without a database the app runs from the bundled verified catalogue.
03 — THE HARDEST DECISIONFix jitter, not frame rate
The gallery felt jittery, and the instinct is to chase frames per second. The bigger win was elsewhere: the centre-screen focus raycast — the check that decides which artwork you're looking at — ran every frame. Throttling it to roughly ten times a second improved perceived smoothness more than any frame-rate tuning did.
The same performance thinking runs through the build: an adaptive device-pixel-ratio capped at 1.8 with a performance monitor to hold 60 fps on weaker GPUs, the 3D code split out of the initial bundle, and dust motes and head-bob that switch off under reduced-motion settings.
04The result
A museum that treats Indian art as a first-class citizen of art history, built on a single permitted data source — and where copyright forbids a reproduction, a modern artist appears as a biography node rather than an invented image.
RESEARCHResearch findings from this project
R-07A single permitted source, and what to do about copyright
Verified Wikipedia/Wikimedia data only; in-copyright modern artists become biography nodes rather than invented reproductions.
R-08Jitter is a bigger problem than framerate
A focus raycast throttled to ~10×/s fixed perceived smoothness more than any framerate tuning did.
NOTESQuestions this project answers
STACKTech stack
- Next.js
- React Three Fiber
- Three.js
- Drizzle
- Neon