如果把传统博物馆搬到浏览器里，会是什么样？
不是简单地把一张张文物图片放到网页上，也不是做一个传统的图文展示页面。
我更希望它是一座真正可以"走进去"的博物馆：
可以在展厅中漫游，可以旋转和缩放文物，可以点击文物查看介绍，也可以通过热点去了解一件文物身上的细节。
于是，我做了这个开源项目：
中国古文物数字博物馆（cultural-relics-museum）
项目使用 Vue 3 + Three.js + Vite 构建，以"夜馆 · 朱金"为视觉主题，目前包含 15 件模拟藏品，并针对 PC 和移动端分别设计了数字展厅体验。
一、为什么想做一个数字博物馆？
传统博物馆最大的魅力，是"人在现场"。
站在一件青铜器面前，你可以看到它真实的材质、轮廓和细节。
但现实中的博物馆也存在一些天然限制：
- 有开放时间
- 有物理空间限制
- 文物不能随意触碰
- 很多细节需要依靠展板和讲解
- 不同地区的人也很难随时到现场参观
而 Web 恰好提供了另一种可能。
如果文物已经完成数字化，那么它就可以从博物馆的玻璃展柜里走出来。
可以被旋转、被放大、被聚焦，也可以加入动画、热点、导览和互动。
这也是我做这个项目最初的想法：
不是把博物馆"搬到网页"，而是尝试让网页本身成为一座博物馆。
二、打开网页，先进入一座三维展厅
整个项目没有采用传统列表式的文物展示方式，而是设计了一套完整的三维展厅。
中央采用类似"圜丘"的环形布局，将文物围绕中央空间进行陈列。
通过展台、径向光轨、中庭光池以及灯光层次，让整个空间拥有一种偏东方、偏仪式感的视觉氛围。
这样读者第一眼就能理解：这不是一个普通的文物展示网站，而是一个真正的 Web 3D 展厅。
三、文物不只是"看"，还可以交互
进入展厅之后，可以直接点击不同的文物。
选中之后，相机会自动聚焦到对应藏品，同时右侧展示文物相关信息。
目前项目设计了：
- 文物分类
- 年代
- 材质
- 出土地
- 文物简介
- 前世今生
- 知识点
- 细节热点
除此之外，还加入了几个比较有意思的 3D 交互。
1. Orbit 旋转缩放
可以围绕文物自由旋转和缩放，从不同角度观察模型。
2. 自动旋转
选中文物后，可以让模型缓慢自转。
相比静态图片，这种方式能够更加直观地展示文物的整体造型和纹饰。
3. 相机聚焦
点击某一件文物之后，相机会自动移动到合适的位置。
不需要用户自己调整摄像机。
4. 展厅漫游
项目还加入了相机漫游逻辑。
相机会按照藏品列表依次飞向不同的展品。
这就有点像：
给数字博物馆增加了一名"虚拟导览员"。
四、最有意思的一个功能：文物细节热点
如果只是让模型旋转，其实还不够。
真正值得关注的，是文物身上的细节。
所以项目加入了类似 Sketchfab 的热点交互。
当相机聚焦到某件文物之后，可以出现编号热点。
点击热点，就能够查看对应位置的细节介绍。
这意味着：
3D 模型负责"看"，热点负责"讲"。
以后如果继续扩展，还可以进一步接入：
- AI 文物讲解
- 语音导览
- 多语言介绍
- OCR
- 文物知识图谱
- AI 图片识别
- 文物相似度搜索
这样，一个简单的 Three.js 3D 展厅，就可以逐渐演变成真正的数字文博应用。
五、Three.js 是这个项目真正的核心
这个项目最核心的部分，其实不是 UI。
而是背后的 Three.js 三维场景。
目前项目使用：
- Vue 3.5
- TypeScript
- Vite 8
- Three.js r185
- OrbitControls
- CSS2DRenderer
- Tween.js
- Pinia
- Element Plus
- Tailwind CSS
其中 Three.js 主要负责整个数字博物馆的三维世界：
Vue 3
↓
页面 / UI / 数据
↓
Three.js
↓
Scene
Camera
Renderer
Light
Model
Controls
↓
3D 文物数字展厅模型资源则采用 GLTF / GLB，并结合 Draco、KTX2/Basis、Meshopt 等技术进行加载和优化。
项目还使用 HDR 环境贴图增强金属、釉面等材质的视觉表现。
这也是我觉得这个项目比较适合作为 Three.js 实战学习案例 的原因。
它不是单独演示某一个 Three.js API，而是尝试把：
场景 + 模型 + 材质 + 灯光 + 相机 + 动画 + 交互 + UI
组合成一个完整的 Web 3D 应用。
六、PC + 移动端双端适配
数字博物馆如果只能在电脑上浏览，体验其实还是会受到限制。
所以项目同时设计了两套展厅：
bash
/pc
/m
七、项目开源，欢迎一起继续完善
目前这个项目已经开源，采用 MulanPSL-2.0 许可证。
如果你刚好也在研究：
- Three.js
- Vue 3
- WebGL
- Web 3D
- 数字孪生
- 数字文博
- 国风 3D
- VibeCoding
那么这个项目可以作为一个比较完整的参考案例。
项目地址：
如果你对 Three.js 数字博物馆、数字文博或者 Web 3D 开发感兴趣，也欢迎一起交流