一个面向生物教学场景的 3D 细胞展示网站。项目以“细胞建筑实验室”为核心界面，把 3D 模型、显微镜图片、出现位置图、结构信息和细胞对比集中在同一个学习页面里，适合用于课堂演示、科普讲解和交互式学习材料。
在线仓库：
https://github.com/threeaus/3D-Biology-Teaching
参考项目：
https://x.com/DilumSanjaya/status/2053155739389378849
这个网站的目标不是做一个普通图片资料页，而是让学习者可以围绕一个细胞对象进行多角度观察：
- 左侧选择不同细胞类型
- 中间查看可旋转的 3D 细胞模型
- 右侧查看结构详情、生物笔记和出现位置
- 底部查看显微镜视图、细胞器列表和细胞对比
页面目前覆盖 7 类细胞：
- 植物细胞
- 白细胞
- 神经元
- 上皮细胞
- 细菌细胞
- 动物细胞
- 肌肉细胞
每种细胞都配有对应的 3D 模型、细胞缩略图、出现位置图、光学显微镜图、染色切片图和电子显微镜图。
项目视觉和交互节奏参考了上面的 X 链接中的 3D 展示案例，重点借鉴的是：
- 左侧对象列表与中间主展示区结合的布局
- 选择对象后模型、标题和图片同步切换的展示方式
- 教学对象以 3D 模型为中心、周围配合信息卡片说明的结构
- 切换时带有轻量动效，让页面更像演示型学习工具，而不是静态资料页
在此基础上，本项目围绕生物教学重新组织内容，补充了显微镜视图、出现位置、细胞器列表、结构详情和细胞对比。
中间主区域用于展示细胞 3D 模型。模型默认采用 45 度俯视角，方便直接看到整体结构。用户可以拖动旋转模型，也可以通过滚轮缩放。
左侧列表可以快速切换不同细胞。切换时，细胞名称、模型、详情图片和底部内容都会同步更新，并带有不同的动效，让页面更接近视频参考里的展示节奏。
右侧“结构详情”区域展示当前细胞的重点结构、基础特征和说明信息，例如：
- 植物细胞：细胞核、液泡、叶绿体、细胞壁
- 神经元：树突、轴突、髓鞘
- 肌肉细胞：肌原纤维、肌节、线粒体、肌质网
“出现位置”区域用于说明这种细胞通常存在于哪里，例如植物组织、血液、脑和脊髓、皮肤或肌肉组织。图片已经调整为完整展示，不会再被裁切。
每种细胞都包含三类辅助图片：
- 光学显微镜
- 染色切片
- 电子显微镜
这些图片用于补充 3D 模型，让学习者可以把模型结构和真实显微观察联系起来。
底部“细胞对比”区域会根据当前细胞展示一个相关对比对象，方便理解不同细胞之间的结构差异。
为了让 GitHub 上传和网页加载更稳定，项目中同时保留了“本地原始素材”和“网页使用素材”的概念。
原始 3D 模型本地保留在：
public/assets/models/
网页实际加载、并上传到 GitHub 的轻量版模型在：
public/assets/models/optimized/
页面代码目前使用的是 optimized 文件夹中的模型。
原始 PNG 图片本地保留，但不会上传到 GitHub。网页实际加载的是轻量版 WebP 图片。
显微镜和细胞缩略图：
public/assets/images/microscope/
出现位置图片：
public/assets/images/locations/
先安装依赖：
npm install启动本地网站：
npm run dev -- --port 5173然后打开：
http://127.0.0.1:5173/
发布或提交前可以运行：
npm run build如果构建通过，说明项目可以正常打包。
- React
- Vite
- Three.js
- Lucide React
.
├── public/
│ └── assets/
│ ├── images/
│ │ ├── locations/
│ │ └── microscope/
│ └── models/
│ └── optimized/
├── src/
│ ├── components/
│ │ └── CellViewer.jsx
│ ├── data/
│ │ └── cells.js
│ ├── App.jsx
│ ├── main.jsx
│ └── styles.css
├── index.html
├── package.json
└── vite.config.js
- 增加更多细胞类型
- 增加结构标签和点击讲解
- 增加细胞对比详情页
- 增加课堂演示模式
- 增加截图导出和学习卡片导出
- 增加更细致的组织、器官和系统层级展示
项目已经完成基础展示功能，所有 7 种细胞都已接入图片和 3D 模型。当前版本适合本地运行、课堂预览和继续扩展内容。