---
title: "Antarang — Walkable 3D Art Museum in React Three Fiber"
description: "Antarang: a walkable 3D museum in React Three Fiber by Shreyansh Kumar Singh, placing Indian art on the world timeline with verified Wikimedia data."
url: https://www.shreyanshkumarsingh.com/projects/antarang-3d-art-museum-react-three-fiber
author: Shreyansh Kumar Singh
updated: 2026-10-08
---

# Antarang: a walkable 3D museum of Indian and world art

By Shreyansh Kumar Singh. Source available on GitHub.

**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

## The 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.

## What 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.

## The hardest decision: Fix 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.

## The 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.

## Research findings

- **A 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.
- **Jitter is a bigger problem than framerate:** A focus raycast throttled to ~10×/s fixed perceived smoothness more than any framerate tuning did.

Stack: Next.js, React Three Fiber, Three.js, Drizzle, Neon

- [Source on GitHub](https://github.com/Shreyanskumarsingh20/3dIndianmusem)

---

Shreyansh Kumar Singh — AI & Full-Stack Engineer, Pune, India. Contact: shreyanshkumarsingh208@gmail.com or https://www.shreyanshkumarsingh.com/contact (call and WhatsApp buttons). More: https://www.shreyanshkumarsingh.com/llms.txt · https://www.shreyanshkumarsingh.com/sitemap.xml