人类文明里程碑 · 活页编年史

一个以 Three.js 为核心、艺术化呈现世界历史里程碑的三维网站。它以一只活页本为隐喻，把历史中里程碑式的人、事、物登记成一张张两面活页：正面是登记卡（编号 / 时间 / 地区 / 名称 / 描述），背面是程序化生成的"铅笔素描"。

三种视图

视图	内容
活页本	皮革封面 + 金属活页环 + 20 张双面活页，翻页动画、纸张弯曲、堆叠阴影
时间轴	20 张活页沿金色时间轴一字排开，选中卡片上浮并显示年代
地理	点阵地球 + 经纬网 + 事件标记 + 相邻事件间的金色大圆航线，缓慢自转

技术要点

• Three.js（ES 模块 + Vite）渲染全部三维内容，OrbitControls 供旋转/缩放。
• 程序化纹理：纸张、皮革、活页孔、登记卡、素描全部由 Canvas 2D 即时生成，无需外部图片。
• 程序化素描：18 种手绘风格速写（头骨、泥板、金字塔、人像、神庙、王冠、斗兽场、卷轴、骑士、帆船、地球仪、苹果、蒸汽机、自由钟、进化树、原子、和平鸽、火箭），带抖动线条与排线阴影，同一词条每次渲染结果确定一致。
• 双面活页：正面用 FrontSide、背面用 BackSide（内容预先水平镜像），配合纸张柔性弯曲，翻页时自然显露背面素描。
• 数据（src/data/entries.js）包含 20 条真实历史里程碑，含经纬度与分类（人 / 事 / 物）。

运行

npm install
npm run dev        # 开发服务器
npm run build      # 生产构建（dist/）
npm run preview    # 预览生产构建

部署

1. 构建

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）：

# 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

git push origin main

远程仓库：git@git.fukun.net:fukunee/Hist.git（SSH）。

4. 验证

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/            截图与验证辅助（开发用）