细胞结构实验室（react 开源）

「2026 细胞结构实验室（react 开源）」
/~da313YZLDM~:/
链接：https://pan.quark.cn/s/d2f7fb32c5e9

细胞结构实验室

这是一个基于 React、Vite、Three.js 构建的交互式细胞结构三维展示平台，支持 GLB 模型或程序化生成的 3D 细胞资源。该项目重现了高级生物教学界面，包含可选择的细胞类型、细胞器详情、对比模式、响应式布局，并集成了可视化验证功能。

在线演示

点击进入 Vercel 部署的在线演示

观看 MP4 演示文件

主要特性

• 七种细胞标本：植物细胞、白细胞、神经元、上皮细胞、细菌细胞、动物细胞、肌肉细胞

• 高保真渲染：植物细胞和白细胞采用 GLB 模型渲染，保留原始纹理细节

• 三维画布优先：默认以 3D 画布渲染为主要视图

• AI 学习助手：内置智能辅导面板，提供学习提示、课程重点与学习进度跟踪

• 模型加载优化：针对大体积 GLB 资源在较慢网络下提供加载遮罩

• 程序化备用模型：对尚未具备生产级 GLB 资产的标本提供程序化几何体回退方案

• 详情面板：展示细胞器信息、显微镜模式、标本元数据及对比工作流

• 响应式设计：支持桌面端、紧凑布局与移动端适配，集成屏幕截图验证

预览模式

模式	功能
三维模型	加载已有的 GLB 模型或程序化生成的 Three.js 几何体
聚焦模式	高亮显示选中的细胞器及相关生物学细节

技术栈

层级	工具
应用框架	React 19、TypeScript、Vite
三维渲染	Three.js、React Three Fiber、Drei
用户界面	CSS 模块（位于 src/styles.css）、Lucide 图标库
资源管理	GLB 模型、透明 PNG 缩略图、NIH 预览图
可视化验证	Playwright Core、PNG 像素指标检测

项目结构

.
|── docs/
│   |── media/
│   └── ASSETS.md
|── public/
│   |── cell-renders/
│   |── cell-renders-transparent/
│   |── models/
│   └── nih-previews/
|── scripts/
│   └── verify.mjs
└── src/
    |── App.tsx
    |── components/
    |── data/
    └── styles.css

快速开始

安装依赖：

npm install

启动本地开发服务器：

npm run dev

在浏览器中打开：

http://127.0.0.1:5173/

构建生产版本：

npm run build

运行可视化验证：

npm run verify

资源说明

高保真细胞模型位于 public/models/目录，并在 src/data/cells.ts中配置。

标本	当前资源文件
植物细胞	public/models/plant-cell-first001.glb
白细胞	public/models/white-blood-cell-user.glb
动物细胞	public/models/animal-cell-nih.glb
神经元	public/models/neuron-nih.glb
细菌细胞壁	public/models/bacteria-wall-nih.glb

透明 PNG 预览图位于 public/cell-renders-transparent/目录，用于缩略图与模型预览。详细来源记录于 docs/ASSETS.md。

验证测试

运行 npm run verify会启动本地应用，对桌面端、紧凑布局、移动端及交互流程进行截图，并通过检查画布像素指标来发现空白渲染或严重布局回归问题。

当前测试覆盖范围包括：

• 桌面端、紧凑布局、移动端冒烟测试

• 植物细胞 GLB 渲染检查

• 白细胞 GLB 渲染检查

• 细菌模型网格交互检查

• 对比模态框检查

开发路线

• 为其余标本添加生产级 GLB 模型

• 为 3D 资源包添加懒加载和路由级代码分割

• 扩展每个细胞器的教学注解

• 添加截图导出与 3D 模型导出工作流

• 在用户界面中直接展示资源许可元数据

许可证

本应用代码基于 MIT 许可证授权。包含的 GLB 模型与图片资源保留其在 docs/ASSETS.md中记载的原始许可。

致谢

特别感谢原作者 @DilumSanjaya 提供的灵感来源与视觉设计方向。

其他 3D 模型来源信息记录于 docs/ASSETS.md中。