跪拜 Guibai
← Back to the summary

A Walkable 3D Museum of Chinese Antiquities, Built with VibeCoding

What can VibeCoding achieve? I used it to build a 3D digital museum

What would it look like to move a traditional museum into a browser?

Not simply placing artifact images onto a webpage, nor building a conventional text-and-image display page.

I wanted it to be a museum you can truly "walk into":

You can roam the exhibition hall, rotate and zoom in on artifacts, click artifacts to view introductions, and use hotspots to examine the details of a relic.

So, I created this open-source project:

Chinese Ancient Artifacts Digital Museum (cultural-relics-museum)

The project is built with Vue 3 + Three.js + Vite, uses "Night Museum · Vermilion Gold" as its visual theme, currently contains 15 simulated collections, and offers separate digital exhibition hall experiences for PC and mobile.

1. Why build a digital museum?

The greatest charm of a traditional museum is "being there in person."

Standing before a bronze vessel, you can see its real material, silhouette, and details.

But real-world museums also have inherent limitations:

And the Web happens to offer another possibility.

Once an artifact is digitized, it can step out of the museum's glass display case.

It can be rotated, magnified, focused on, and can also incorporate animation, hotspots, guided tours, and interaction.

This is also the original idea behind this project:

Not "moving the museum to a webpage," but attempting to make the webpage itself become a museum.

2. Opening the page, you first enter a 3D exhibition hall

Screenshot 2026-08-12 14.10.34.png

The entire project does not use a traditional list-style artifact display method but instead designs a complete 3D exhibition hall.

The center adopts a circular layout reminiscent of a "Circular Mound Altar," arranging artifacts around the central space.

Through display platforms, radial light trails, a central atrium light pool, and layered lighting, the entire space carries a somewhat Eastern, ritualistic visual atmosphere.

This way, readers understand at first glance: this is not an ordinary artifact display website, but a genuine Web 3D exhibition hall.

3. Artifacts are not just for "looking" — they are interactive

image.png

After entering the exhibition hall, you can directly click on different artifacts.

Once selected, the camera automatically focuses on the corresponding collection, while the right side displays artifact-related information.

Currently, the project has designed:

Beyond that, several more interesting 3D interactions have been added.

1. Orbit rotation and zoom

You can freely rotate and zoom around the artifact, observing the model from different angles.

2. Auto-rotation

After selecting an artifact, the model can slowly rotate on its own.

Compared to static images, this method more intuitively displays the artifact's overall shape and ornamentation.

3. Camera focus

After clicking an artifact, the camera automatically moves to a suitable position.

Users do not need to adjust the camera themselves.

4. Exhibition hall roaming

The project also adds camera roaming logic.

The camera flies to different exhibits in sequence according to the collection list.

This is somewhat like:

Adding a "virtual tour guide" to the digital museum.

4. The most interesting feature: artifact detail hotspots

image.png

Just rotating the model is not enough.

What truly deserves attention are the details on the artifact.

So the project adds hotspot interactions similar to Sketchfab.

After the camera focuses on an artifact, numbered hotspots can appear.

Clicking a hotspot lets you view a detailed introduction to that specific location.

This means:

The 3D model handles "looking," while hotspots handle "explaining."

If expanded further in the future, it could also integrate:

In this way, a simple Three.js 3D exhibition hall can gradually evolve into a genuine digital cultural heritage application.

5. Three.js is the true core of this project

The core part of this project is not actually the UI.

It is the Three.js 3D scene behind it.

Currently, the project uses:

Among these, Three.js is primarily responsible for the entire 3D world of the digital museum:

Vue 3
  ↓
Page / UI / Data
  ↓
Three.js
  ↓
Scene
Camera
Renderer
Light
Model
Controls
  ↓
3D Artifact Digital Exhibition Hall

Model assets use GLTF / GLB and are loaded and optimized with technologies like Draco, KTX2/Basis, and Meshopt.

The project also uses HDR environment maps to enhance the visual performance of materials like metal and glaze.

This is also why I think this project is quite suitable as a Three.js hands-on learning case study.

It does not demonstrate a single Three.js API in isolation, but attempts to combine:

Scene + Model + Material + Lighting + Camera + Animation + Interaction + UI

into a complete Web 3D application.

6. Dual adaptation for PC and mobile

If a digital museum can only be browsed on a computer, the experience is still limited.

So the project simultaneously designs two exhibition halls:

/pc
/m

image.png

image.png

7. The project is open source, welcome to help improve it together

This project is now open source under the MulanPSL-2.0 license.

If you happen to be researching:

Then this project can serve as a fairly complete reference case.

Project address:

https://github.com/zhangbo126/cultural-relics-museum

https://gitee.com/ZHANG_6666/cultural-relics-museum

If you are interested in Three.js digital museums, digital cultural heritage, or Web 3D development, you are also welcome to connect and discuss.