企业官网建设流程全解析

Cell Architecture Studio 是一个开源的交互式 3D 细胞学习平台，基于 React + Three.js 构建，内置 7 种标本级 3D 细胞模型（植物细胞、神经细胞、细菌等），支持细胞器细节查看、对比模式、测验与闪卡学习。本文带你 5 分钟在本地跑起这个项目，无需任何后端配置。

项目亮点：一个能转动的"活教材"

打开页面后，你会看到这样的布局：左侧是细胞类型列表和细胞器目录，中间是可旋转、可剖切的 3D 细胞舞台，右侧是 AI Tutor 学习面板和细胞器详情。

它和传统"静态图 + 文字"的生物教材最大的不同在于：

• 🧬7 种高保真标本：植物、白细胞、神经细胞、上皮细胞、细菌、动物、肌肉细胞，均由真实 GLB 3D 模型驱动（存放于 public/models/）
• 🔬Mesh / Focus 双视图：Mesh 模式看完整 3D 结构，Focus 模式高亮单个细胞器
• 📊学习工具链：测验、闪卡、笔记、收藏库、每日挑战
• 🏆游戏化进度：本地 XP 经验值、成就系统、掌握度追踪
• 📸截图与 GLB 导出：一键导出当前标本的图片或 3D 模型

下面是平台内置的几例细胞渲染图，你可以在本地启动后自由旋转查看：

一键安装：环境准备与克隆步骤

环境要求

只需一个前置条件：

克隆仓库并安装依赖

git clone https://gitcode.com/gh_mirrors/ce/cell-architecture-studio cd cell-architecture-studio npm install

💡 依赖清单见 package.json，核心技术栈为 React 19、Three.js 0.181、Vite 7 与 TypeScript。

启动本地开发服务器

npm run dev

看到终端输出后，浏览器打开http://127.0.0.1:5173/即可进入。首次进入会自动弹出欢迎导览（Welcome Tour），跟着点几下就能熟悉整个界面。

所有学习进度、收藏、经验值都保存在浏览器本地（localStorage），无需注册账号，数据文件定义在 src/lib/storageKeys.ts。

生产构建与测试：可选的进阶命令

想体验完整的生产级构建，或跑一遍单元测试，可以用以下命令：

# 生产构建（TypeScript 检查 + Vite 打包） npm run build # 运行单元测试（Vitest + node:test） npm test

项目还内置了可视化验证脚本 scripts/verify.mjs，它会调用本地 Chrome 对桌面/紧凑/移动端布局截图，并检测画布像素指标，防止 3D 渲染出现白屏回归：

# 先启动应用，再在另一个终端执行 APP_URL=http://127.0.0.1:5173/ npm run verify

了解代码：核心模块路径速查

想深入定制界面或数据？几个关键入口值得收藏：

• 应用主入口与状态管理：src/App.tsx
• 7 种细胞的数据配置（名称、细胞器、GLB 资产路径）：src/data/cells.ts
• 3D 渲染场景：src/components/CellScene.tsx 与 src/components/Stage.tsx
• AI Tutor 面板：src/components/RightPanel.tsx
• 资产来源说明：docs/ASSETS.md

Vite 配置中将 Three.js 等重型依赖拆分为独立缓存块（见 vite.config.ts），让 3D 页面二次加载更快。

写在最后

从克隆到打开浏览器，整个流程不超过 5 分钟。现在你可以：

1. 旋转、剖切每一颗 3D 细胞，用 Focus 模式逐个认识细胞器
2. 打开 Compare 对比植物细胞与动物细胞的差异
3. 做几轮测验，收集 XP 解锁成就徽章

无论是自学生物的学生，还是想给课堂做演示的老师，这个 3D 细胞学习平台都值得一试。MIT 协议，自由使用与二次开发。🎓