从零搭建轻量化通用数字档案馆元宇宙档案平台实操指南

一、前置准备：3分钟搞定开发环境

本次使用开源框架A-Frame（纯Web、零插件、无需3D美术基础）+ 阿里云OSS（临时存档案图片/模型，后续可换本地Nginx），按以下步骤操作：

1.1 基础软件安装

• 安装Node.js 18.x LTS（含npm）：访问 https://nodejs.org/dist/v18.20.4/node-v18.20.4-x64.msi 下载安装包，一路勾选Add to PATH默认下一步
• 验证安装：Win+R输入cmd回车，执行node -vnpm -v，输出版本号即成功
• 安装轻量本地HTTP服务器http-server：执行npm install -g http-server

1.2 阿里云OSS快速设置（临时可选）

• 注册阿里云账号：https://dsw.console.aliyun.com/ 完成个人实名认证
• 创建公共读OSS Bucket：进入OSS控制台→创建Bucket→名称自定义、地域选就近、权限公共读、存储类型标准、冗余本地冗余，其他默认→确认
• 上传测试资源：Bucket内创建images、models文件夹，分别上传1-2张高清档案扫描件（PNG/JPG）、1个A-Frame支持的3D模型（GLB/GLTF优先，可去 Sketchfab免费区 下载测试）
• 获取文件URL：点击已上传文件→详情→复制URL，记录2张扫描件、1个GLB模型的地址

二、核心代码：10分钟复制粘贴搭建元宇宙档案空间

新建文件夹archive-metaverse，在其中创建以下3个文件，内容可直接复制：

2.1 index.html（主入口文件）

```html ```

2.2 package.json（启动配置）

```json { "name": "archive-metaverse", "version": "1.0.0", "description": "轻量化通用数字档案馆元宇宙档案平台", "scripts": { "start": "http-server -p 8080 -c-1" } } ```

2.3 替换关键配置

打开index.html，找到3处带【】的占位符，分别替换为之前准备的2张扫描件URL、1个GLB模型URL，注意不要保留【】符号。

三、本地启动与功能测试

3.1 启动本地服务器

在archive-metaverse文件夹空白处右键打开Git Bash或Windows PowerShell（Win11/10右键选“在终端中打开”），执行npm start，看到输出“Available on: http://127.0.0.1:8080”即成功。

3.2 测试功能

• 打开Chrome/Edge浏览器，访问http://127.0.0.1:8080
• 移动鼠标到扫描件/模型上，会出现高亮/放大效果
• 点击扫描件：会放大到屏幕中央，清晰查看细节
• 点击3D模型：会放大到屏幕中央并开始旋转，再次点击停止旋转
• 点击左侧蓝色“重置”按钮：所有资源恢复原位

四、进阶扩展（20分钟可选）

4.1 换成本地存储（无需阿里云OSS）

删除之前准备的OSS相关内容，在archive-metaverse文件夹内创建assets/images、assets/models子文件夹，将测试资源放入对应位置，修改index.html中的src属性为相对路径：

```html src="./assets/images/your-archive1.png" src="./assets/images/your-archive2.png" src="./assets/models/your-archive-box.glb" ```

4.2 添加VR模式支持

修改a-scene标签的vr-mode-ui属性为enabled: true，保存后刷新页面，浏览器右上角会出现VR眼镜图标，接入Oculus/Meta Quest/HTC Vive等设备即可沉浸式体验。