尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

从本地到Vercel只需3步:开源3D解剖浏览器Human Atlas部署完全指南

发布时间:2026/9/26 8:09:59

资讯中心
01
ARTICLE

从本地到Vercel只需3步:开源3D解剖浏览器Human Atlas部署完全指南

从本地到Vercel只需3步:开源3D解剖浏览器Human Atlas部署完全指南
从本地到Vercel只需3步开源3D解剖浏览器Human Atlas部署完全指南【免费下载链接】human-atlasOpen-source 3D anatomy explorer: 2,234 selectable BodyParts3D meshes, system layers, search, and exploded views.项目地址: https://gitcode.com/gh_mirrors/hu/human-atlasHuman Atlas 是一款开源的 3D 解剖浏览器基于 React、Three.js 和 shadcn/ui 构建内置 2,234 个可单独选中的 BodyParts3D 网格、15 个人体系统图层和 3,432 个可搜索的解剖学概念。这篇文章将带你完成 Human Atlas 部署的全部流程先在本地 3 步跑起来再用零配置一键发布到 Vercel 静态托管。 Human Atlas 是什么Human Atlas 把标准成人男性参考解剖结构拆分成 2,234 个可独立选择的网格支持以下能力自由视角轨道旋转、缩放直接在身体上点选结构系统图层按骨骼、循环、呼吸等 15 个人体系统开关显隐也有骨骼器官快速预设爆炸视图拖动滑块从完整解剖逐渐过渡到全部零件的展开清单解剖搜索输入结构名称即时检索按/快捷键快速唤起移动端适配紧凑控件与详情面板在手机端同样可用核心数据来自 CC BY 4.0 协议的 BodyParts3D 4.0 数据集完整致谢信息见 ATTRIBUTION.md。 第一步获取项目代码项目要求Node.js 22.13 或更高版本无需任何 API Key 或账号。克隆仓库git clone https://gitcode.com/gh_mirrors/hu/human-atlas cd human-atlas 版本检查node -v确认不低于 22.13项目通过 package.json 中的engines字段约束了 Node 版本。 第二步安装依赖并启动在本地运行只需两条命令npm ci npm run devnpm ci按锁文件精确安装依赖保证环境一致npm run dev启动 Vite 开发服务器固定监听 3016 端口配置见 vite.config.ts浏览器打开 http://localhost:3016 即可看到 3D 解剖场景。首次加载时会下载约 33 MB 压缩几何数据15 个分片模型见 public/models/页面带有加载进度提示属正常现象。 第三步验证与构建本地运行正常后建议跑一遍校验脚本覆盖网格缓冲、命名、爆炸布局、搜索交互等检查项npm run check node scripts/validate-atlas.mjs node scripts/validate-interactions.mjs npm run buildnpm run build会产出纯静态站点输出目录为dist/。由于项目是纯静态前端任何支持静态托管的平台都可以直接部署。☁️ 一键部署到 Vercel项目已内置 Vercel 部署配置导入仓库后无需任何额外设置{ framework: vite, buildCommand: npm run build, outputDirectory: dist, installCommand: npm ci }配置解读完整内容见 vercel.json配置项值说明frameworkvite自动识别为 Vite 项目installCommandnpm ci安装依赖buildCommandnpm run build构建命令outputDirectorydist静态产物目录部署步骤注册 Vercel 账号将本仓库导入为 Vite 项目等待构建完成获得一个可分享的访问地址之后每次推送代码都会自动重新构建部署。⚠️ 部署注意事项模型体积dist/中包含约 33 MB 压缩几何数据15 个body-*.bin.gz分片 atlas.json 索引Vercel 免费额度足以承载若用其他静态托管注意单文件大小限制压缩传输项目对.gz文件做了兼容处理无论服务器按Content-Encoding还是按原始 gzip 文件返回都能正确解码逻辑见 model-download.ts许可证应用代码为 MIT 协议LICENSE解剖数据独立采用 CC BY 4.0 协议二次分发时请保留致谢定位说明这是一个教育用途的解剖浏览器不是诊断或手术工具 关键文件索引文件用途README.md项目总览与完整说明vercel.jsonVercel 部署配置vite.config.tsVite 构建配置入口web/产物dist/app/page.tsx主界面图层面板、搜索、爆炸控制app/scene.tsxThree.js 3D 场景渲染public/models/atlas.json解剖结构目录索引web/index.htmlHTML 入口页从本地npm run dev到 Vercel 自动部署Human Atlas 整个流程不到 5 分钟。现在就可以克隆仓库亲手把 2,234 个解剖结构拆开看看 【免费下载链接】human-atlasOpen-source 3D anatomy explorer: 2,234 selectable BodyParts3D meshes, system layers, search, and exploded views.项目地址: https://gitcode.com/gh_mirrors/hu/human-atlas创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。