Cell Architecture Studio：用 3D 探索细胞，开源
生物课本有一个问题。
里面的图是平的。细胞器用箭头标注，三四个箭头指向同一个位置。内质网怎么包裹细胞核、线粒体怎么在细胞质里漂浮——这些空间关系，你得盯着静态插图读一段文字来理解。
Cell Architecture Studio 换了一种方式。它是一个交互式 3D 细胞生物学画廊，React + Three.js 构建。选一个细胞类型，旋转它，放大看细胞器，切换到 Focus 模式专注研究单个结构。全部实时渲染。
能看到什么
七种标本视图，每种都有对应的 3D 模型：
- 植物细胞——高精度 GLB 渲染，保留原生纹理
- 白细胞——同样是 GLB，精细的表面结构
- 动物细胞——来自 NIH 源数据
- 神经元——轴突和树突结构清晰可见
- 细菌细胞壁——横截面可视化
- 上皮细胞——上皮层结构
- 肌肉细胞——长条形纤维结构
每种细胞要么加载生产级 GLB 模型（如果有的话），要么用 Three.js 程序化几何体作为回退。界面上会标明当前是哪种。
两种视图模式
应用提供 Mesh 模式和 Focus 模式。Mesh 是默认的——完整 3D 画布视图，支持 OrbitControls 旋转缩放。Focus 模式聚焦选中的细胞器，将其他部分变暗，同时显示生物学细节。
AI 助教面板紧挨着 3D 视图运行。它提供学习提示、跟踪掌握进度，让你边看边问。3D 探索加上对话式解说，这使它不像一本课本，更像一次实验室参观。
技术栈
React 19、TypeScript、Vite。Three.js 通过 React Three Fiber 和 Drei 渲染。CSS modules 做样式。GLB 模型存放在 public/models/。
精度最高的模型——植物细胞和白细胞——从本地 GLB 文件加载，保留原生纹理。其他标本（神经元、细菌细胞壁、动物细胞）使用 NIH 来源或程序化几何体。对慢速网络，应用为大型 GLB 文件显示加载遮罩。
对照模式让你并排切换细胞类型。还有细胞器信息面板、显微镜模式滤镜和标本元数据。
验证管线
项目自带基于 Playwright 的视觉验证脚本。npm run verify 捕获桌面、紧凑和移动端截图，然后检查画布像素指标以捕捉空白渲染或布局回归。当前覆盖：
- 桌面、紧凑和移动端冒烟测试
- 植物细胞 GLB 渲染检查
- 白细胞 GLB 渲染检查
- 细菌交互检查
- 对照弹窗检查
这很重要因为 3D 渲染很难测试。一个加载失败的模型可能仍然”渲染”——一片空白画布。像素指标能捕捉到单元测试发现不了的问题。
作者
cclank，受生物插画师 Dilum Sanjaya 启发。应用代码是 MIT 协议，模型资产保留其在 docs/ASSETS.md 中的来源记录。
试试看
项目主页有在线 demo。克隆它，运行 npm install && npm run dev，从任意角度观察一个神经元。
