DeepTime Mammalia 交互式 3D 演化树可视化技术分析
一、项目概述
1. 项目背景
A. 项目简介
DeepTime Mammalia 是一个运行于现代浏览器端的交互式数据可视化作品，探索哺乳动物 2 亿年的演化史诗。项目采用 WebGL 和 CSS3D 技术，以沉浸式的方式展示从二叠纪末期的合弓纲祖先到现代哺乳动物的演化历程。
B. 核心亮点
- 基于 Mammal Diversity Database (MDD) v2.3 分类系统
- 包含 167 个科、上千个演化节点
- DNA 双螺旋画廊与动态演化树结合
- 隐藏的溯源彩蛋模式
2. 技术定位
本项目采用 Vanilla JavaScript (ES6+) 开发，无复杂构建工具依赖，保持代码的纯粹与轻量。所有数据与图像资源均通过 JS 变量预加载，无需后端环境，可直接双击 index.html 运行。
二、技术架构
1. 核心技术栈
graph TB
subgraph 前端展示层
A[HTML5/CSS3]
B[JavaScript ES6+]
end
subgraph 可视化引擎
C[D3.js v7]
D[Three.js r128]
end
subgraph 动画与渲染
E[Tween.js]
F[WebGL Renderer]
G[CSS3D Renderer]
end
subgraph 数据层
H[data.js 演化树数据]
I[images_data.js Base64图像]
end
A --> C
A --> D
B --> C
B --> D
C --> E
D --> F
D --> G
C --> H
D --> I
A. 核心库
- D3.js (v7)：处理复杂的树状数据结构与布局计算
- Three.js (r128)：处理 WebGL 粒子背景与 CSS3D 变换
- Tween.js：处理平滑的补间动画
B. 数据结构
- data.js：演化树拓扑数据（JSON Object）
- images_data.js：图像资源（Base64 编码）
2. 系统组成
A. 3D 序幕模块
基于 Three.js CSS3DRenderer 构建 DNA 双螺旋画廊，使用 WebGL 粒子系统创建动态星空背景，随鼠标与触摸流动。
B. 演化树模块
D3.js 动态树支持从纲到科的逐级展开收起，全手势支持鼠标滚轮缩放、双指捏合及拖拽漫游。
C. 交互控制模块
地质时间轴实时显示当前视口对应的地质年代，智能检索支持中文拉丁学名实时搜索与高亮定位。
D. 溯源彩蛋模块
隐藏模式展示穿越大灭绝的幽灵线框路径，致敬生命韧性。
三、核心功能实现
1. 3D 螺旋画廊
graph LR
A[用户进入页面] --> B[加载 Three.js 场景]
B --> C[初始化 CSS3DRenderer]
C --> D[创建 DNA 双螺旋卡片]
D --> E[添加 WebGL 粒子背景]
E --> F[监听鼠标触摸事件]
F --> G[更新相机位置]
G --> H[渲染每一帧]
A. 技术要点
- 使用 CSS3DRenderer 创建可交互的 3D DOM 元素
- WebGL 粒子系统通过自定义 Shader 实现星空效果
- 相机过渡动画使用 Tween.js 实现平滑插值
B. 数据流
演化树数据 → D3 层次结构处理 → CSS3D 对象创建 → 场景渲染
2. D3.js 动态演化树
sequenceDiagram
participant U as 用户
participant D as D3.js
participant T as 树状数据
participant V as SVG 渲染
U->>D: 点击节点
D->>T: 查找子节点
T-->>D: 返回子节点数据
D->>V: 计算新布局
V->>U: 更新视图
U->>D: 滚轮缩放
D->>V: 应用缩放变换
V->>U: 渲染缩放结果
A. 树布局算法
使用 D3.js 的 d3.tree() 或 d3.cluster() 布局，将层次数据转换为可视化坐标。
B. 交互实现
- 节点点击事件绑定 d3.selectAll().on('click')
- 缩放功能通过 d3.zoom() 行为实现
- 拖拽漫游结合 d3.drag() 和坐标变换
3. 地质时间轴
graph TB
A[当前视口范围] --> B[计算可见节点时间]
B --> C[映射到地质年代]
C --> D[渲染时间标尺]
D --> E[显示 MYA 标记]
A. 时间映射
将演化节点的分化时间（MYA - Million Years Ago）映射到地质年代标尺，实时更新底部时间轴显示。
B. 视口同步
监听 D3.js 的 zoom 事件，获取当前变换矩阵，计算可见范围，动态更新时间轴。
四、数据结构设计
1. 演化树数据模型
// 伪代码示例
{
name: "Mammalia",
time: 160, // MYA
children: [
{
name: "Monotremata",
time: 160,
children: [...]
},
{
name: "Theria",
time: 160,
children: [
{
name: "Marsupialia",
time: 160,
children: [...]
},
{
name: "Placentalia",
time: 160,
children: [...]
}
]
}
]
}A. 节点属性
- name：中文名或拉丁学名
- time：冠群分化时间（MYA）
- children：子节点数组
- image：物种图像（Base64）
- description：详细描述文本
2. 图像资源管理
graph LR
A[原始图像] --> B[AI 模型生成]
B --> C[Base64 编码]
C --> D[嵌入 images_data.js]
D --> E[运行时加载]
E --> F[CSS3D 渲染]
A. 图像来源
- AI 模型 nanobanana 生成物种复原图
- 167 个科的代表物种画像
- 可能存在解剖学细节偏差
B. 存储方式
Base64 编码嵌入 JS 文件，无需额外 HTTP 请求，提升加载速度。
五、性能优化策略
1. 渲染优化
A. 按需加载
演化树节点默认折叠，仅展开可视区域节点，减少 DOM 元素数量。
B. CSS3D 优势
利用 GPU 加速的 CSS3 变换，避免频繁重排重绘。
C. 粒子系统优化
WebGL 粒子使用 GPU 实例化渲染，支持数千粒子流畅运行。
2. 数据优化
A. 数据预加载
所有数据在页面加载时一次性读取，避免运行时请求。
B. 图像 CDN 加速
图像资源通过 CDN 链路分发，提升国内访问体验。
3. 交互优化
A. 防抖节流
缩放和拖拽事件使用 requestAnimationFrame 限制渲染频率。
B. 平滑动画
Tween.js 补间动画确保所有过渡流畅自然。
六、部署与运行
1. 目录结构
graph TB
A[Mammalia-tree-main/] --> B[index.html]
A --> C[main.js]
A --> D[data.js]
A --> E[images_data.js]
A --> F[assets/]
A --> G[examples/]
2. 运行方式
A. 本地运行
- Clone 或下载项目压缩包
- 直接双击 index.html 即可在浏览器中运行
- 无需 Node.js，无需本地服务器
B. 在线部署
GitHub Pages 自动部署，访问地址：seanwong17.github.io/Mammalia-tree/
七、技术亮点分析
1. 零依赖架构
graph LR
A[Vanilla JS] --> B[无构建工具]
B --> C[无后端依赖]
C --> D[开箱即用]
A. 优势
- 无需 npm install
- 无需 webpack/vite 配置
- 双击即可运行
- 适合科普展示和教学
B. 适用场景
个人项目、科普展览、教学演示、快速原型
2. D3.js 与 Three.js 融合
A. 职责分离
- D3.js 负责 2D 数据可视化和交互
- Three.js 负责 3D 场景和粒子效果
- 两者通过状态管理协调工作
B. 场景切换
从 3D 螺旋画廊到 2D 演化树，通过平滑的相机过渡动画实现无缝切换。
3. 科学与艺术的结合
A. 数据准确性
基于 MDD v2.3 分类系统，时间标记为冠群分化时间。
B. 视觉表现
AI 生成物种复原图提供艺术化视觉参考，双螺旋结构象征遗传密码。
八、潜在改进方向
1. 数据增强
- 添加更多演化节点和物种信息
- 引入化石记录数据
- 支持用户自定义数据导入
2. 交互扩展
- 添加 VR/AR 支持
- 支持演化路径回放动画
- 增加多语言支持
3. 性能提升
- 使用 Web Workers 处理大数据
- 实现 LOD（Level of Detail）渲染
- 优化粒子系统算法
九、开源协议
本项目采用知识共享署名非商业性使用相同方式共享 4.0 国际许可协议（CC BY-NC-SA 4.0）。
- 可以自由地分享、修改本项目
- 不可用于商业用途
- 转载或修改需注明原作者 Sean Wong