Johto Atlas is an interactive field guide to ten Pokémon. Each specimen has a portrait and a real 3D figure you can turn, zoom and expand, a painted backdrop that shifts from day to dusk, and field notes. The Johto map lets you walk between habitats and meet each Pokémon in a short arrival scene.
Highlights
Portrait or 3D figure, with quarter and full turns, zoom and an expanded viewer
Day and dusk lighting on a canvas-painted backdrop per habitat
A walkable Johto map with places, arrow keys, an arrival story and town music
Search, type filters and an Up next card
A demo toy shelf with a bag kept in local storage
Static export on Netlify with long cache headers for models and art
3D scenes, geometry, materials and lighting in the browser via WebGL
Custom shaders, post-processing and interactive 3D experiences
CanvasWebGLNetlify
01
Overview
Johto Atlas is a 3D field guide to ten Pokémon set in the Johto region. Each specimen has a portrait and a 3D figure you can turn in your hands, a living painted backdrop that changes with daylight and dusk, field notes, and a place on an interactive map you can walk across on foot. A small demo toy shelf rounds it off. Unofficial fan project.
02
The problem
Most fan sites are lists of stats. The brief was a guide that feels like holding the creature: real 3D figures that load fast on a static host, a map that invites exploring instead of clicking, and a page that still works as a plain, readable reference when WebGL is not available.
03
What I built
Specimen viewer with Portrait and 3D figure modes, quarter and full turns, zoom, expanded view and dusk lighting
Ten optimised GLB figures with a canvas-painted sky and scenery per habitat
Johto map with places, arrow-key and on-screen walking, an arrival scene with a short story per Pokémon, and optional town music
Search and type filters, an Up next feature card, and a demo toy shelf with a bag kept in local storage
Static export on Netlify with long-lived caching for models and art
04
Architecture
A static Next.js app: everything renders in the browser from bundled data, 3D models and art served from the same host with long cache headers.
Architecture · Johto Atlas - 3D Pokémon Field Guide
A high-level view. Endpoints, hosts and security details are left out on purpose.
05
Key decisions
01
Static export, no server
Why: The guide is read-only, so a fully static build keeps it fast, free to host and simple to cache.
Trade-off: No accounts or saved progress beyond local storage.
02
Portrait first, 3D on request
Why: Portraits load instantly on any device; the 3D figure is a choice the visitor makes, and the page remembers it.
Trade-off: Two assets per specimen to prepare and keep in step.
03
Walkable map instead of a list of places
Why: Walking between habitats makes the region feel like a place and gives each Pokémon an arrival scene.
Trade-off: More motion code to keep smooth on low-end machines.