DeepTime Evolution Trees

项目背景

DeepTime Mammalia 和 DeepTime Sauropsida 是两个姊妹项目，分别聚焦哺乳纲和蜥形纲的演化历史。它们来自我对高等动物演化的长期兴趣，尤其是羊膜动物两大主线：一条从合弓类延伸到哺乳动物，也包括我们人类所属的演化分支；另一条从蜥形类延伸到今日的鸟类、鳄类、龟鳖类、喙头类和有鳞类。我希望把这些原本分散在分类学、古生物学和系统发育资料中的知识，整理成可以浏览、探索和沉浸观看的形式。

这类项目的想法很早就有。真正开始做，是因为当时图像生成模型的质量逐渐接近我对这个题材的预期：演化树可以用数据和可视化表达，但如果缺少足够有表现力的物种复原图，用户很难对这些遥远的类群形成直观印象。图像生成能力成熟后，原先停留在设想里的“深时演化导览”才有了落地条件。

为了做出这两个项目，我查阅了大量分类、演化时间和物种资料，也补了很多生物演化相关知识。项目最终呈现为一个前端可视化作品，但背后更像是一次围绕兴趣展开的资料整理、知识学习和视觉表达练习。

系列定位

Mammalia 项目先完成并被阮一峰《科技爱好者周刊》第 381 期推荐，获得了更多关注；Sauropsida 项目则是在同一套表达方式上的延展，聚焦羊膜动物另一条幸存主线。两者在传播结果上不同，但创作目标是一致的：把原本分散在百科、论文、数据库和教材中的演化知识，整理成更容易进入和浏览的交互式体验。

因此我把它们放在同一个 DeepTime 系列里介绍。它们共同体现了一套创作方法：以资料整理为基础，用数据可视化承载结构，用 AI 生成图像补足视觉想象，再通过前端交互把深时尺度变成可以被浏览的界面。

项目入口

• DeepTime Mammalia GitHub：github.com/SeanWong17/Mammalia-tree
• DeepTime Mammalia Demo：mammalia-tree.pages.dev
• DeepTime Sauropsida GitHub：github.com/SeanWong17/Sauropsida-tree

核心功能

• 3D 螺旋画廊：用 Three.js / CSS3DRenderer 构建开场画廊，将物种卡片组织成具有仪式感的序幕。
• 交互式演化树：使用 D3.js 渲染可缩放、可拖拽、可展开收起的时间树，呈现类群之间的系统关系。
• 地质时间轴：在演化树中加入时间尺度，让用户感知“百万年前”的深时跨度。
• 节点资料卡：为关键类群提供中英文名称、时间范围和说明文本，兼顾浏览和知识补充。
• 溯源彩蛋：通过隐藏视图展示更深层的已灭绝旁支和幸存主线，强化演化史中的断裂、延续和偶然性。
• 中英文支持：支持界面和节点信息的中英文切换，提升项目的传播和阅读范围。

我的工作

• 负责两个项目的整体选题、叙事结构、视觉风格、交互体验和前端实现。
• 梳理哺乳纲和蜥形纲的分类结构、时间线、节点说明和展示粒度，将复杂知识转化为可浏览的树形数据。
• 使用 D3.js 实现动态演化树布局、缩放、拖拽、搜索、高亮和节点资料卡交互。
• 使用 Three.js / CSS3DRenderer 构建开场螺旋画廊、粒子背景、相机转场和沉浸式视觉效果。
• 借助图像生成模型制作物种和类群视觉素材，并对 AI 生成图像的用途做边界说明，避免把艺术化复原图当作严谨学术图像使用。
• 持续打磨 README、双语文案、项目命名和视觉表达，让项目既是技术作品，也是个人兴趣和知识审美的表达。

技术实现

这两个项目都采用纯前端静态站点实现，核心是数据可视化、3D 视觉表达和知识内容组织。

• 数据组织：将分类层级、时间信息、节点说明和图片映射整理为前端可直接读取的数据结构。
• 树图布局：使用 D3.js 管理树状布局、节点展开收起、缩放漫游和搜索定位。
• 3D 序幕：使用 Three.js 和 CSS3DRenderer 表达螺旋画廊、空间运镜和卡片过渡。
• 响应式体验：根据桌面端和移动端调整粒子数量、树宽、初始缩放和交互参数。
• 静态部署：所有数据和资源都随仓库提供，无需后端服务，适合 GitHub Pages / Cloudflare Pages 等静态托管。

复盘

做演化树不只是把节点堆出来。展示粒度怎么定、过密分支怎么收、时间信息怎么组织、节点说明写到什么程度，都需要在科学准确性、浏览体验和视觉吸引力之间反复权衡。

项目命名和文案也花了不少时间。我希望用户进来时感受到的不是一个图表工具，而是一次围绕深时生命史展开的导览，所以命名、视觉和交互需要互相配合。

另外一个收获是更清楚了 AI 生成素材的边界：它能提供有吸引力的视觉入口，但替代不了资料校对和科学说明。项目质量最终还是取决于资料组织、交互设计和对内容边界的判断。