细胞结构实验室（react 开源）
细胞结构实验室（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中。