千年石窟探秘 · 一眼千年 · 知春

简介

「千年石窟探秘 · 一眼千年」 是一个融合了石窟全景漫游与侦探解谜玩法的文化遗产互动网站。在这里，参观不再是走马观花地“线上看图”，而是一场沉浸式的寻迹之旅：你可以走进 360° 的洞窟现场，在壁画与造像间搜寻蛛丝马迹，通过切换历史时相、开启紫外线视角来发现肉眼难见的隐秘细节，并结合随身“探秘手札”完成推理解谜，最终生成专属的探索明信片。

网站目前已收录敦煌莫高窟与云冈石窟两大经典景区的多个探秘关卡，支持电脑与手机浏览器随时畅玩；同时内置了开放的“故事工坊”，支持用户自行上传全景图片、配置线索与谜题，创作并分享属于自己的石窟探秘故事。

项目缘起

这个项目最初在研学规划中只是一个“纯展示网页”。但在前期调研时我们发现，敦煌研究院等官方的数字导览平台已经做得极其精细和完整，如果只是单纯把石窟图片搬到网上，既缺乏新意也没有竞争力。我们希望用户能真正“走进”一段历史文化，带着好奇心去观察与思考，而不仅仅是划过一张张图片——于是，我们将“寻迹与推理解谜”玩法融入了石窟导览之中。

在技术选型上，团队最初尝试使用 3D 高斯（3D Gaussian Splatting）重建可自由移动视角的真三维场景。但在实地考察中发现，石窟景区客流量大，现场无法采集到足够密集、干净的空间点云数据；相比之下，全景图只需定点拍摄、避开人流后再进行拼接，呈现效果更为稳定。因此，我们最终确定了“2D 全景漫游 + 侦探解谜游戏”的设计方案。

在素材采集上，云冈各窟的全景由团队实地拍摄、辅以网络资料拼接；莫高窟窟内禁止拍摄，所有画面均取自复制窟，我们没有拍摄，以尊重文物版权。

项目缘起配图

项目概览

它怎么玩

选地点、选难度：伴随着从地球落入石窟景区的开场动画，你可以自由选择前往敦煌莫高窟或云冈石窟，并在三档难度（对应每关 1～3 道推理题）中开启探索。
360° 环顾探索：拖动画面即可环视整座洞窟，通过滚轮或双指缩放观察壁画与造像细节，点击编号热点即可拾取关键线索。
读手札、答谜题：收集到的线索会自动汇入“探秘手札”，结合手札中的背景故事与细节提示，即可完成单选、多选推理题目。
换时相、照紫外：拨动时间轴可在“现状勘查”与“旧档复原”等历史时相间切换，开启紫外线模式则能照出肉眼难以察觉的隐秘笔触。
通关留回响：通关后可观看结算动画并生成可分享的纪念明信片；此外还能在“故事工坊”中上传全景、自建关卡，并一键导出 JSON 配置文件。

项目概览配图

项目亮点

身临其境的 360° 石窟全景

将实拍拼接的 2:1 全景图映射在球体内壁、相机置于球心，只需拖动屏幕即可环顾整座洞窟，在手机和电脑上都能获得流畅、沉浸的观察视角。
精准不移位的空间点击寻迹

点击判定不依赖固定的屏幕二维坐标，而是从相机发射三维射线与球面求交，再计算空间距离来命中热点；无论切换设备还是旋转视角，线索位置都不会错位。
还原文物勘查的紫外线视角

并非叠加简单的颜色滤镜，而是逐像素计算画面的亮度、色差与邻域辉光，将高亮度、低色差的隐藏笔触提取出来，真实模拟文物勘查中的紫外线观察体验。
数据驱动、关卡灵活配置

地点、关卡、历史时相、线索与题目均采用结构化配置管理。新增一座洞窟或一段故事，只需修改一份配置文件，无需重写页面骨架。
“故事工坊”支持自由共创（UGC）

内置可视化的关卡配置生成器，通过上传全景图与填表即可生成关卡配置、导出 JSON 文件，也支持导入他人创作的关卡，让每个人都能编写自己的石窟探秘故事。
随时接续的稳定体验

针对异步加载设计了防错乱与失败重试机制，切换后台或刷新页面时会自动保存探索进度，并结合 Vitest 与 Playwright 完成了自动化与视觉回归验证。

技术与方法

本项目采用纯前端架构（Vue 3 + TypeScript + Three.js + Pinia + Vite），无需后端服务，通过 GitHub Pages 部署上线。

全景渲染：将 2:1 等距柱状全景纹理贴合在翻转 X 轴的 SphereGeometry 内壁，相机固定于球心，通过拖动改变经纬角、滚轮或双指缩放动态调整视场角（FOV）。
点击发现：利用 Raycaster 将屏幕点击转换为三维射线并与球面求交，计算交点与预设三维热点坐标的欧氏距离，小于阈值即判定命中；编号标记由 CSS2D 实现，并对普通模式与紫外模式进行了状态隔离。
紫外观察：基于 EffectComposer 后处理管线（RenderPass → ShaderPass → OutputPass），综合亮度、色差与邻域辉光进行特征提取，且仅在开启紫外模式时激活以保障运行性能。
架构演进：从早期的单文件组件（SFC）硬编码，逐步解耦为独立 Composable，最终演进为“Level 声明需求 + 宿主统一编排 + 插件按需扩展”的微内核架构，使手电筒、线索收集等能力均可作为插件独立扩展。
工程保障：异步资源加载携带唯一 loadId 防止快速切换时画面串台，将设备像素比（DPR）上限控制在 1.5 以兼顾流畅度，监听页面切后台或关闭事件实现自动存档，并使用 Vitest 测试核心纯函数与状态库、Playwright 验证关键交互路径与视觉快照。