Beijing: A City in Time
An interactive 3D atlas tracing Beijing through twelve historical chapters, from an early settlement to the contemporary city.
Beijing: A City in Time (北京 · 时间之城) is an interactive historical atlas built as a miniature city you can turn, inspect, and explore. Twelve chapters connect the story of an early settlement with the Beijing of today.
Background
A city’s history is also a history of space: where its center moves, how its walls expand, and how water, streets, and buildings organize everyday life. A timeline supplies the dates. A spatial model makes those changes easier to see together.
This project brings that spatial perspective into a browser, with the quiet presentation of a museum model. Each chapter pairs a city scene with a short narrative, landmark explanations, and sources. Moving between chapters reveals changes in the city’s form; an outline overlay helps compare successive city boundaries.
What You Can Explore
Rotate and zoom the city, switch between day and night, or play a guided journey through the twelve chapters. Chinese and English are available throughout, and switching languages preserves the current view.
Selected landmarks also open in a separate 3D viewer. The Forbidden City, Temple of Heaven, Bird’s Nest, China Zun, and CCTV Headquarters can be inspected more closely using the same geometry and materials as the city scene.
A first-person walking pilot brings the camera down to street level in one contemporary hutong district. It supports keyboard movement and touch controls, with a defined network of accessible lanes and collision boundaries. This is a small outdoor slice of the 2026 chapter, rather than a walkable reconstruction of every historical era.
How It Is Built
The city runs on Three.js and WebGL. Buildings are assembled procedurally from geometry: curved roofs, columns, platforms, window grids, walls, and modern tower forms. The miniature city remains an interactive three-dimensional scene as the camera moves.
Physically based materials, procedural surface textures, environment lighting, and soft shadows give the models their material character. Higher quality settings add screen-space ambient occlusion and planar water reflections. Three quality levels adjust the rendering cost; a lighter Canvas fallback provides a simplified view when WebGL is unavailable.
The walking mode reuses the city geometry with a separate perspective camera and navigation data for streets and obstacles. Keeping it connected to the existing model makes the shift from city overview to human scale part of the same experience.
The application uses plain JavaScript, HTML, and CSS. A small Python build script bundles the engine, styles, chapter content, translations, and interaction modules into a self-contained HTML file. The main experience can run offline without an API key, backend, or runtime CDN dependency. The public edition is hosted on Cloudflare Pages, built from Git into a release directory containing the HTML and the engine license.
The Reconstruction Boundary
The atlas is an interpretive model. Distances, building proportions, and street layouts are compressed to make the story readable; early city sites are schematic reconstructions. Historical sources and explanatory limits are available inside the experience. The visual detail should invite exploration without implying surveyed accuracy.
Explore Beijing: A City in Time, or open the Chinese edition.