[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75749":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":14,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":14,"lastSyncTime":26,"discoverSource":27},75749,"LearningCell","GordenSun\u002FLearningCell","GordenSun","细胞3D模型展示",null,"TypeScript",277,77,4,2,0,3,120,5.68,false,"main",true,[],"2026-06-12 02:03:35","# 细胞结构工坊 · Cell Architecture Studio\n\n一个面向中文课堂的交互式 3D 生物教学网页，支持对五个真实尺寸的细胞 \u002F 分子模型进行旋转、缩放与观察。\n\n> 🌱 _在显微镜下探索生命之美_\n\n## 模型清单\n\n| 概念 | 模型文件 | 简介 |\n| --- | --- | --- |\n| 植物细胞 | `app\u002Fpublic\u002Fmodels\u002Fplant-cell.glb` | 含细胞壁、叶绿体、大液泡等结构 |\n| 动物细胞 | `app\u002Fpublic\u002Fmodels\u002Fanimal-cell.glb` | 含细胞膜、内质网、高尔基体等 |\n| 白细胞 | `app\u002Fpublic\u002Fmodels\u002Fwhite-blood-cell.glb` | 免疫系统的卫士 |\n| 神经元 | `app\u002Fpublic\u002Fmodels\u002Fneuron.glb` | 树突、轴突与突触结构 |\n| DNA 双螺旋 | `app\u002Fpublic\u002Fmodels\u002Fdna.glb` | 双螺旋骨架与碱基对 |\n\n模型已使用 [Draco](https:\u002F\u002Fgoogle.github.io\u002Fdraco\u002F) 压缩，每个文件约 6 ~ 11 MB。\n\n## 技术栈\n\n- ⚡️ **Vite + React 19 + TypeScript** — 现代化前端工程\n- 🎨 **three.js \u002F @react-three\u002Ffiber \u002F @react-three\u002Fdrei** — WebGL 3D 渲染\n- 🗜 **DRACOLoader（自带本地 wasm 解码器）** — 离线可用，无需访问 gstatic\n- 🎯 **自定义流式加载器** — 用 `fetch + ReadableStream` 真实统计下载进度\n\n## 本地开发\n\n```bash\ncd app\nnpm install\nnpm run dev\n```\n\n构建：\n\n```bash\ncd app\nnpm run build\nnpm run preview   # 本地预览构建产物\n```\n\n## 部署到 GitHub Pages\n\n仓库内已经提供 `.github\u002Fworkflows\u002Fdeploy.yml`，把仓库推到 GitHub 后：\n\n1. 进入 **Settings → Pages**\n2. **Source** 选择 **GitHub Actions**\n3. 推送到 `main` 分支即可自动构建并发布\n\n工作流默认按 `\u002F\u003C仓库名>\u002F` 作为站点根（兼容 `https:\u002F\u002F\u003Cuser>.github.io\u002F\u003Crepo>\u002F`）。如果你要部署到根域名（自定义域名或用户主页 `user.github.io`），把 workflow 里的 `VITE_BASE` 改成 `\"\u002F\"` 即可。\n\n## 加载策略\n\n- **优先加载**：用户进入页面后，会立即下载当前展示的模型（默认是体积最小、加载最快的 _植物细胞_，约 6 MB）。下载过程显示真实进度条与百分比。\n- **后台静默**：默认模型解析完成后（或者 5 秒超时兜底），其它 4 个模型会按顺序串行下载，避免与首个模型抢占带宽。\n- **缓存命中**：浏览器对 `.glb` 启用 `force-cache`，再次访问几乎无需等待。\n- **手动覆盖**：当用户点击侧边栏中尚未加载完成的模型时，该模型的下载会立刻提升到前台，并显示进度。\n\n## 目录结构\n\n```\n.\n├── .github\u002Fworkflows\u002Fdeploy.yml   # GitHub Pages 自动部署\n├── README.md\n├── app\u002F                           # Vite 前端工程\n│   ├── public\u002F\n│   │   ├── draco\u002F                 # 自带的 Draco 解码器\n│   │   ├── images\u002F                # 细胞缩略图（已压缩）\n│   │   └── models\u002F                # 5 个 .glb 模型\n│   ├── src\u002F\n│   │   ├── components\u002F            # UI 组件（侧栏、3D 查看器、信息面板等）\n│   │   ├── data\u002Fmodels.ts         # 5 个生物概念的数据\n│   │   ├── hooks\u002FuseModel.ts      # 加载状态订阅 hook\n│   │   ├── lib\u002FmodelLoader.ts     # 流式下载 + Draco 解析 + 缓存\n│   │   ├── App.tsx\n│   │   └── ...\n│   └── package.json\n└── （根目录其它是源文件备份，例如未压缩的 PNG 与 .draco.glb 原始资源）\n```\n\n## 许可与说明\n\n本仓库的模型与图片源文件来自仓库作者本人提供的教学素材，仅用于课堂教学与科普展示。\n\nMade with 🌱 for biology classrooms.\n","细胞结构工坊是一个面向中文课堂的交互式3D生物教学网页，支持用户对五个真实尺寸的细胞\u002F分子模型进行旋转、缩放与观察。该项目使用Vite + React 19 + TypeScript构建现代化前端工程，并采用three.js及相关的React库实现WebGL 3D渲染。模型文件经过Draco压缩处理，每个约6至11MB大小，确保了加载速度与性能。项目特别设计了智能加载策略以优化用户体验，包括优先加载当前展示模型、后台静默下载其他模型等机制。此工具非常适合生物学教育领域中的课堂教学或科普展示场景，帮助学生更直观地理解复杂的细胞结构。","2026-06-11 03:53:12","CREATED_QUERY"]