作者: The Bugged Dev
在线体验 关于项目
Anatomy Atelier 把心脏、大脑、肺、肝脏、肾脏、眼睛、肠道、胰腺和皮肤组成一座可搜索的九器官学习库。每个条目都将可旋转缩放的 3D 标本、结构热点、关键事实和学习卡片放在同一个工作台中，并提供剖切、分层、隔离和器官对比工具。
探索不止于查看模型：使用者可以从器官说明继续打开课程、简单动画插图和测验。模型通过 GLTFLoader 与 Meshopt 解码器加载，最近使用的 3 个器官会留在缓存中，配合预取和按需渲染，让频繁切换仍保持流畅。
体验要点
- 搜索并切换心脏、大脑、肺、肝脏、肾脏、眼睛、肠道、胰腺和皮肤九种器官。
- 拖动模型进行旋转、滚动缩放，并点击热点查看当前器官的结构说明；也可开启自动旋转持续观察。
- 使用剖切查看内部结构，切换线框分层视图观察网格，或在隔离模式中淡化底座与接触阴影；对比模式还可并排查看两个器官。
- 从器官事实和学习卡片继续进入课程与测验，用引导式学习延伸自由探索。
技术解析
3D 资产 · Tripo 器官库
九种器官分别以 GLB 资产随项目交付，场景节点与材质带有 Tripo 标识。GLTFLoader 配合 Meshopt 解码器加载模型，并将每个器官统一缩放、居中到同一查看空间，让热点坐标和交互工具可以共用。
查看器交互 · 控制器与屏幕空间热点
OrbitControls 负责旋转、缩放和自动旋转；热点通过屏幕空间投影完成指针命中，并由深度缓冲与朝向判定控制可见性，无需持续对模型做射线检测。裁剪平面提供剖切，线框开关呈现分层视图，隔离模式淡化底座和接触阴影；对比模式则并排呈现两个器官，并补充当前器官的功能与尺度信息。
加载策略 · 3 项模型缓存与预取
模型管理器保留最近使用的 3 个器官，并复用正在进行的加载请求；指针移入或键盘聚焦器官条目时，还会以低优先级预取对应 GLB。切换器官时，相关插图也会提前进入浏览器缓存。
渲染与学习 · 按需更新
常驻的动画帧循环仅在交互、动画或状态变化时调用渲染器，静止画面不会持续重绘。React 管理搜索、器官切换、对比、课程和测验状态，GSAP 只为切换后的内容提示安排轻量入场动画。
