中国古建筑瑰宝 3D THreeJS 开源

「10-中国古建筑瑰宝 3D THreeJS」

/~7d443ZoFWy~:/

链接：https://pan.quark.cn/s/e6a1ce7e4b9c

中国古建筑瑰宝 3D

一个用 Vite 和 Three.js 制作的中国古建筑交互展示页。项目以卷轴式界面呈现 7 座代表性建筑，支持分类筛选、双语切换、移动端浏览和按需加载的 3D 环视。

在线预览: https://architecture-iota-khaki.vercel.app

功能

7 座古建筑: 故宫、布达拉宫、黄鹤楼、天坛、长城、福建土楼、莫高窟。

3D 模型展示: 桌面端直接进入可交互舞台，移动端点击"三维环视"后按需加载。

多视图图册: 每个建筑提供正面、背面、侧面等补充视图。

响应式体验: 支持手机、平板和桌面视口。

双语界面: 中文 / 英文一键切换。

项目结构
复制代码
src/
  main.js              # 页面交互、语言切换、筛选和移动端逻辑
  viewer.js            # Three.js 模型加载与相机控制
  data/monuments.js    # 建筑数据、模型路径、文案和相机参数
  i18n/ui.js           # 中英文 UI 字典
  styles/main.css      # 页面样式和响应式布局

public/
  models/              # 压缩后的 GLB 模型
  posters/             # 首屏海报图
  views/               # 多视图图片
  draco/               # Draco 解码器

tests/                 # 数据完整性、i18n 和移动端验收测试

中国古建筑瑰宝 3D · China Heritage 3D

一个基于 Vite + Three.js 的中国古建筑交互展示项目。以卷轴式界面呈现 7 座代表性建筑，支持分类筛选、双语切换、响应式布局与按需加载的 3D 环视体验。

🌐 在线预览：https://architecture-iota-khaki.vercel.app

✨ 功能特性

七大古建筑：故宫、布达拉宫、黄鹤楼、天坛、长城、福建土楼、莫高窟

3D 模型交互：

桌面端：直接进入可交互舞台

移动端：点击「三维环视」后按需加载 GLB 模型

多视图图册：每个建筑提供正面、背面、侧面等补充视图

响应式设计：完美适配手机、平板、桌面三种视口

双语界面：中文 / 英文一键切换

性能优化：

Draco 网格压缩

移动端首屏轻量化

Vercel 部署裁剪，减少上传体积

📁 项目结构
复制代码
.
├── design-demos/              # 设计规格 & 定稿 Demo（素宣册页方向）
├── docs/
│   └── superpowers/           # 实现计划（10 任务，TDD + 逐任务提交）
├── public/
│   ├── models/                # 压缩后的 GLB 3D 模型
│   ├── posters/               # 首屏海报图
│   ├── views/                 # 多视图图片
│   └── draco/                 # Draco 解码器
├── scripts/
│   └── shot.mjs               # 六视口截图验收工具
├── src/
│   ├── main.js                # 页面交互、语言切换、筛选、移动端逻辑
│   ├── viewer.js              # Three.js 模型加载与相机控制
│   ├── data/
│   │   └── monuments.js       # 建筑数据、模型路径、文案、相机参数
│   ├── i18n/
│   │   └── ui.js              # 中英文 UI 字典
│   └── styles/
│       └── main.css           # 页面样式与响应式布局
├── tests/                     # 数据完整性、i18n、移动端验收测试
├── .gitignore
├── .mailmap                   # 作者身份映射
├── .vercelignore
├── DEPLOYMENT.md              # 部署说明
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── vercel.json
🚀 快速开始

环境要求

Node.js ≥ 16

npm ≥ 8

安装依赖
复制代码
npm install
本地开发
复制代码
npm run dev
访问 http://localhost:5173 查看效果。

构建生产版本
复制代码
npm run build
预览构建产物
复制代码
npm run preview
六视口截图验收（响应式验证）
复制代码
npm run shot
脚本：scripts/shot.mjs，用于生成手机 / 平板 / 桌面等多视口截图，方便 UI 验收。

🧩 技术栈

⚡️ Vite：极速构建工具

🎮 Three.js：WebGL 3D 渲染

🗜 Draco：模型几何压缩

📱 响应式适配：移动手势 + 断点布局 + 平板书脊避让

🧪 TDD：测试驱动开发，逐任务提交

▲ Vercel：静态站点部署

🌍 国际化

默认语言：中文

切换方式：页面右上角语言按钮

文案配置：src/i18n/ui.js

📦 部署

本项目已针对 Vercel 优化：

.vercelignore：排除非必要文件，加速部署

vercel.json：配置重写规则与构建命令

DEPLOYMENT.md：包含详细部署流程与注意事项

一键部署：

https://vercel.com/button

🤝 贡献指南

欢迎 Issue / PR！

Fork 本仓库

新建分支：git checkout -b feat/your-feature

提交变更：git commit -m "feat: 描述"

推送分支：git push origin feat/your-feature

提交 Pull Request

建议遵循：

TDD 风格开发

单一职责提交

清晰的 commit message

📄 License

MIT License © xyiqq