102 lines
4.6 KiB
Markdown
102 lines
4.6 KiB
Markdown
# 人类文明里程碑 · 活页编年史
|
||
|
||
一个以 **Three.js** 为核心、艺术化呈现世界历史里程碑的三维网站。它以一只**活页本**为隐喻，把历史中里程碑式的人、事、物登记成一张张两面活页：正面是登记卡（编号 / 时间 / 地区 / 名称 / 描述），背面是程序化生成的"铅笔素描"。
|
||
|
||
## 三种视图
|
||
|
||
| 视图 | 内容 |
|
||
| --- | --- |
|
||
| **活页本** | 皮革封面 + 金属活页环 + 20 张双面活页，翻页动画、纸张弯曲、堆叠阴影 |
|
||
| **时间轴** | 20 张活页沿金色时间轴一字排开，选中卡片上浮并显示年代 |
|
||
| **地理** | 点阵地球 + 经纬网 + 事件标记 + 相邻事件间的金色大圆航线，缓慢自转 |
|
||
|
||
## 技术要点
|
||
|
||
- **Three.js**（ES 模块 + Vite）渲染全部三维内容，`OrbitControls` 供旋转/缩放。
|
||
- **程序化纹理**：纸张、皮革、活页孔、登记卡、素描全部由 Canvas 2D 即时生成，无需外部图片。
|
||
- **程序化素描**：18 种手绘风格速写（头骨、泥板、金字塔、人像、神庙、王冠、斗兽场、卷轴、骑士、帆船、地球仪、苹果、蒸汽机、自由钟、进化树、原子、和平鸽、火箭），带抖动线条与排线阴影，同一词条每次渲染结果确定一致。
|
||
- **双面活页**：正面用 `FrontSide`、背面用 `BackSide`（内容预先水平镜像），配合纸张柔性弯曲，翻页时自然显露背面素描。
|
||
- 数据（`src/data/entries.js`）包含 20 条真实历史里程碑，含经纬度与分类（人 / 事 / 物）。
|
||
|
||
## 运行
|
||
|
||
```bash
|
||
npm install
|
||
npm run dev # 开发服务器
|
||
npm run build # 生产构建（dist/）
|
||
npm run preview # 预览生产构建
|
||
```
|
||
|
||
## 部署
|
||
|
||
### 1. 构建
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 2. 部署到 Web 服务器（hist.fukun.net）
|
||
|
||
站点托管在腾讯云 `62.234.90.54`（Ubuntu 24.04），静态文件放在 `hugo` 用户的 `~/hist` 目录，Nginx 指向该目录。
|
||
|
||
通过 SSH 打包上传（密钥见 `C:\Code\Claw\keys\tx-ubuntu-hugo.pem`）：
|
||
|
||
```bash
|
||
# Windows (Git Bash) / Linux
|
||
SSHKEY="C:/Code/Claw/keys/tx-ubuntu-hugo.pem"
|
||
tar czf - -C dist . | ssh -i "$SSHKEY" -o StrictHostKeyChecking=accept-new hugo@62.234.90.54 \
|
||
'rm -rf ~/hist/* && tar xzf - -C ~/hist && echo 部署完成'
|
||
```
|
||
|
||
> Nginx 配置与 SSL 证书已就绪：
|
||
> - 站点配置：`/etc/nginx/sites-available/hist.fukun.net`（root `/home/hugo/hist`）
|
||
> - SSL 证书：`/etc/nginx/ssl/hist.fukun.net_bundle.crt` + `hist.fukun.net.key`（TrustAsia）
|
||
> - 证书本地备份：`C:\Code\Claw\nginx\hist.fukun.net\`
|
||
|
||
### 3. 推送代码到 Git
|
||
|
||
```bash
|
||
git push origin main
|
||
```
|
||
|
||
远程仓库：`git@git.fukun.net:fukunee/Hist.git`（SSH）。
|
||
|
||
### 4. 验证
|
||
|
||
```bash
|
||
curl -s -o /dev/null -w "%{http_code}\n" https://hist.fukun.net/
|
||
# 应输出 200
|
||
```
|
||
|
||
## 操作
|
||
|
||
- **拖动** 旋转视角，**滚轮** 缩放
|
||
- **← →** 或底部按钮 翻页（翻面查看背面素描）
|
||
- 点击 活页 / 时间轴卡片 / 地球标记 选中词条
|
||
- 顶部按钮或按键 **1 / 2 / 3** 切换 活页本 / 时间轴 / 地理 视图
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
src/
|
||
main.js 入口
|
||
core/App.js 编排器：渲染、灯光、相机、视图切换、拾取
|
||
scene/Binder.js 活页本（封面、环、双面活页、翻页动画）
|
||
scene/Timeline.js 时间轴视图
|
||
scene/Globe.js 地理视图（点阵地球、弧线、标记）
|
||
textures/pages.js 纸张 + 登记卡/素描两面纹理
|
||
textures/sketch.js 程序化素描生成器
|
||
data/entries.js 历史词条数据
|
||
data/worldMap.js 简化大陆轮廓
|
||
ui/overlay.js HTML 覆盖层
|
||
utils/ 缓动 / 文字精灵
|
||
scripts/ 截图与验证辅助（开发用）
|
||
```
|
||
|
||
## TODO / 后续规划
|
||
|
||
- [ ] **活页本分册**：为全部词条增加分册（分卷）机制——按历史时期或主题分组，顶部提供分册导航与切换，活页本只展示当前分册的内容，降低单册厚度、便于浏览。
|
||
- [ ] **时间轴时期划分**：时间轴轴线上标注中西方历史时期刻度（如中国朝代：夏商周 / 秦汉 / 隋唐 / 宋元明清；西方：古典时代 / 中世纪 / 文艺复兴 / 启蒙运动 / 工业革命等），作为背景衬托。
|
||
- [ ] **词条插入时间轴**：词条按其 `timeNumeric` 真实时间位置插入时间轴（当前为等距排列），使时期刻度与词条位置相互对应。
|
||
- [ ] **词条结构考究与排版优化**：重新审视 `entries.js` 数据模型（补充年代精度、文明圈、影响、关键词等字段），并优化登记卡正面排版（信息层级、留白、装饰细节）。
|