最近邮件与私信收到了好多国外友人的催稿，有生物老师，也有土耳其老哥的来信，希望我继续将项目做下去。

我也大受鼓舞，只是最近工作太忙，先做一个demo页面看看，但我保证会持续迭代这个项目

我希望AI技术真正能照进教育领域，给孩子们一些帮助，也希望有想法的伙伴贡献你的idea 或者欢迎各位老师提出你的需求

项目开源地址：https://github.com/cclank/cell-architecture-studio…

cclank/cell-architecture-studio

Source: https://github.com/cclank/cell-architecture-studio

Cell Architecture Studio

An interactive cell architecture gallery built with React, Vite, Three.js, and staged GLB or procedural 3D cell assets. The project recreates a premium educational biology interface with selectable cell types, organelle details, comparison mode, responsive layout, and visual verification coverage.

Live Demo

Open the live Vercel deployment

View the MP4 demo file

Highlights

• Seven specimen views: plant cell, white blood cell, neuron, epithelial cell, bacteria cell, animal cell, and muscle cell.
• High fidelity Plant Cell and White Blood Cell GLB rendering with native texture preservation.
• Mesh first experience with 3D canvas rendering as the default view.
• AI Tutor panel with learning prompts, lesson focus, and mastery tracking.
• Model loading overlay for large GLB assets on slower networks.
• Procedural fallback geometry for specimens that do not yet have production GLB assets.
• Detail panel for organelles, microscope modes, specimen metadata, and comparison workflow.
• Responsive desktop, compact, and mobile layouts with browser screenshot verification.

Preview Modes

Tech Stack

Project Structure

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

Getting Started

Install dependencies:

npm install

Run the local development server:

npm run dev

Open the app:

http://127.0.0.1:5173/

Build for production:

npm run build

Run visual verification:

npm run verify

Asset Notes

The highest fidelity specimens are loaded from public/models/ and configured in src/data/cells.ts.

Transparent PNG references in public/cell-renders-transparent/ are used for thumbnails and model previews. Detailed provenance is tracked in docs/ASSETS.md.

Verification

npm run verify launches the local app, captures desktop, compact, mobile, and interaction screenshots, then checks canvas pixel metrics to catch blank renders or major layout regressions.

Current coverage includes:

• Desktop, compact, and mobile smoke checks.
• Plant Cell GLB render check.
• White Blood Cell GLB render check.
• Bacteria mesh interaction check.
• Comparison modal check.

Roadmap

• Add production quality GLB models for the remaining specimens.
• Add lazy loading and route level code splitting for 3D bundles.
• Expand educational annotations for each organelle.
• Add screenshot export and 3D export workflows.
• Add asset license metadata directly into the UI.

License

The application code is licensed under the MIT License. Included GLB models and image assets retain their documented provenance in docs/ASSETS.md.

Credits

Special thanks to the original creator @DilumSanjaya for the source inspiration and visual direction.

Additional 3D model provenance is documented in docs/ASSETS.md.

岚叔 (@LufzzLiz): 复刻差不多了，给大家分享教程并开源代码，先看看我的录屏效果如何，主要看前两个，后面还没做😂

首先特别感谢下原作者@DilumSanjaya，创造出如此美妙的项目，让我大受震撼👍

【手把手教程】 1️⃣ 直接将原作者视频发给coex，让其复刻视频的网站。codex 会截图、抽帧、生图然后进行默默复刻

2️⃣