引言最近在 GitHub 上发现了一个很有意思的项目——Anatomy它是一个基于 Three.js 构建的交互式 3D 人体解剖学探索平台。项目由开发者 thebuggeddev 创建旨在通过沉浸式的 3D 可视化方式帮助学习者更直观地理解人体结构。项目概览Anatomy 被定位为一款“Anatomy Atelier 3D learning platform”3D 解剖学工作室学习平台核心是一个结合了 3D 渲染与交互式学习功能的 Web 应用。从项目结构和近期提交记录来看它不仅仅是一个静态的 3D 展示还包含了测验功能和多语言支持等教学辅助特性。技术栈从项目结构来看Anatomy 采用了现代化的全栈技术方案前端框架基于 Next.js使用 App Router 架构3D 渲染使用 Three.js 进行 3D 场景构建和交互部署平台运行在 OpenAI 的 Vinext 上一个基于 Cloudflare 的全栈应用框架数据库支持 Cloudflare D1 和 Drizzle ORM多语言支持国际化i18n主要功能亮点从提交记录和目录结构中可以梳理出以下功能点3D 人体模型探索核心功能用户可以在三维空间中自由旋转、缩放查看人体各个部位。交互式测验项目包含了测验功能用于检验学习成果并且有持续的 UI 和交互反馈优化。多语言支持从next.config.ts的提交记录来看项目已支持多语言切换。本地部署含报错处理执行git clone https://github.com/thebuggeddev/anatomy.git克隆项目执行cd anatomy然后执行npm install安装依赖项需要提前安装Node.js 22.13.0在win的cmd终端直接运行npm run dev会报错因为这个设置环境变量的语法是 Linux / macOS 系统专用的打开文件把package.json文件的9、10和12行的WRANGLER_LOG_PATH.wrangler/wrangler.log删除再执行npm run dev打开http://localhost:3000/默认是英文点击右上角可以切换中文器官会自动旋转点击器官拖动可以改变查看的角度左侧列是器官种类右侧是器官信息这是介绍大脑器官的中文页面点击圆点可以发现大脑的组成部分的局部信息往下拉动点击测验图的左上角会显示器官的区域让你进行选择拉动到最下方还有器官的显微镜视图、器官对比、器官的疾病和器官所在的系统足以看出这个项目的用心程度。这个项目虽然只有介绍 9 个器官但每个器官的信息深度和交互维度都达到了数字教具的水准——从 3D 模型到显微组织再到疾病关联远超普通科普网页创作不易禁止抄袭转载请附上原文标题和链接