Cell Architecture Studio是一个基于React+Three.js（React Three Fiber）构建的开源交互式3D细胞生物学画廊与教育平台。它把生物课本里扁平、箭头密布的静态细胞切面图，变成了可在浏览器中自由旋转、缩放、深入钻取的实时渲染3D模型。你可以在七种标本（植物细胞、白细胞、神经元、上皮细胞、细菌细胞、动物细胞、肌肉细胞）间切换，选择模型后聚焦单个细胞器结构，播放生命过程动画视角，并让AI导师（AI Tutor）在同一套3D上下文里围绕当前观察对象做对话式讲解、学习提示与掌握度追踪，把“死记硬背细胞器”变成一次沉浸式数字实验室参观。

核心优势：

1. 七种细胞3D高精度可视：提供植物细胞、白细胞、动物细胞、神经元、上皮细胞、细菌细胞、肌肉细胞的样本视图。其中植物细胞与白细胞采用高保真GLB原生纹理模型加载，其余细胞在无生产级模型时以Three.js程序化几何体兜底渲染，保留基本空间形态供教学理解。

2. Mesh全景与Focus聚焦双模式：Mesh模式——完整3D画布，OrbitControls支持鼠标/触屏360°旋转、缩放、平移，建立整体空间关系（如内质网如何包裹细胞核、线粒体在胞质中分布）；Focus模式——选中某一细胞器（如线粒体、高尔基体、叶绿体）后，其余结构变暗高亮当前目标，并弹出生物学细节说明，适合逐结构拆解讲授。

3. AI导师同上下文讲解：右侧/侧边内置AI Tutor面板，不是脱离场景的通用百科，而是围绕你当前正在看的3D细胞与选中细胞器提供学习提示与课程焦点（如“定位线粒体并解释其在动物细胞中的能量转换作用”）、掌握度追踪（已探索细胞数/细胞器数）、对话式提问（如“动物细胞与植物细胞在细胞壁和液泡上的视觉差异是什么？”），让3D探索+自然语言解释同步发生。

4. 生命过程视角与对比模式：支持在3D上下文中“播放”结构关系视角（如沿轴突走向、穿细胞壁截面），并提供对照模式（Compare Mode）并排切换不同细胞类型（动物vs植物、细菌vs真核），直观比对结构异同，适合课堂演示翻转教室。

5. 纯前端零后端隐私安全：MIT协议开源，静态部署无需后端，学校内网或个人本地均可跑，无用户数据上传风险；响应式布局覆盖桌面/紧凑/移动端，课堂投影与学生自带设备都能用。

适用人群：

1. 生物/医学专业学生：替代平面课本图理解三维空间关系，跟AI导师自测细胞器功能。

2. 中小学生物教师：课堂投影演示细胞核、线粒体、叶绿体等结构，Focus模式逐点讲。

3. 科普策展与内容创作者：录屏3D旋转视角+AI讲解片段做短视频或展厅交互屏内容。

4. 前端/教育科技开发者：参考React Three Fiber在科教可视化中的实践，fork扩充新细胞模型。