[分享] 纯前端撸了一个「交互式哺乳动物演化树」，融合 Three.js 与 D3.js (含彩蛋)

大家好，继上次的周期表之后，我又手痒做了一个新的可视化项目DeepTime Mammalia。

这是一个关于时间的项目。利用浏览器重构了从二叠纪末期合弓纲祖先到现代哺乳动物的演化路径。包含 167 个科、上千个演化节点。

主要用来探索 WebGL (Three.js) 和 D3.js 在科普可视化上的结合。

传送门

• 在线体验 (Live Demo): https://mammalia-tree.pages.dev/
• GitHub 源码: https://github.com/SeanWong17/Mammalia-tree

技术栈与实现细节

为了保持轻量和便于修改，本项目依然坚持 Vanilla JS，没有引入复杂的打包工具。

1. **3D 序幕 (Three.js + CSS3DRenderer)**： 开场是一个 DNA 双螺旋画廊，配合粒子星空背景。利用 CSS3D 实现了卡片在 3D 空间中的扭曲和排列。

2. **演化树 (D3.js)**： 核心部分是一个高性能的动态树。支持从“纲”到“科”的逐级展开，底部集成了地质年代标尺（ MYA ），缩放时能看到对应的时间跨度。

3. AI 辅助工作流：

   • 代码：核心逻辑和部分 Shader 由 Google Gemini 协助优化。
   • 图像：物种复原图使用 AI 模型生成，旨在提供艺术参考。

4. 无后端： 所有数据和图片资源都内嵌在 JS 中，index.html 双击即用，甚至不需要本地 Server 。

关于彩蛋

在这个项目中，我埋了一个“溯源”模式。 在界面中找到并点击“溯源”按钮，你会看到一条穿越大灭绝的幽灵线框路径那是作为“最后的合弓纲”孑遗，在这颗星球上走过的路。

截图预览

3D 螺旋画廊

演化树概览

代码完全开源，欢迎 Star 或者 Fork 修改！ 如果有发现分类学上的 Bug ，也欢迎提 Issue 指正。