fukunee
4e818d53e3
A Three.js site presenting 20 world history milestones as double-sided loose-leaf pages, with three views: a leather binder with page-flip animation, a golden timeline, and a dotted globe with great-circle arcs. All textures (paper, leather, registration cards, and 18 hand-drawn sketches) are generated procedurally via Canvas 2D, so no external image assets are needed beyond the Earth map. Includes dev helper scripts for screenshots, ASCII previews, and headless verification.
54 lines
2.6 KiB
Markdown
54 lines
2.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 / 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/ 截图与验证辅助（开发用）
|
||
```
|