跳到主要内容
AI教程

RuiC-PoseAtlas 教程：搭建与使用三语人体姿态参考图库

本教程带你使用 RuiC-PoseAtlas 浏览和下载多角度人体姿态参考图，并完成本地启动、快捷键操作、三语链接分享、数据校验、新姿态添加及静态网站部署。

AI我搜编辑部阅读约 10 分钟
RuiC-PoseAtlas 教程：搭建与使用三语人体姿态参考图库

认识 RuiC-PoseAtlas

RuiC-PoseAtlas 是一个完全静态、零运行时依赖的人体姿态参考图库。项目收录 288 组姿态和 1,439 张人台线稿，将同一姿态的正面、斜侧、侧面、俯视与仰视角度集中管理，方便创作者连续比较体态、比例、四肢走向和镜头关系。

RuiC-PoseAtlas 项目预览

它适合 AI 绤画、插画、漫画、3D 建模、动画、摄影构图和视觉设计，也可以作为原生前端项目的学习案例。网站使用纯 HTML、CSS 与 ES Modules 编写，不依赖 React、Vue 或打包器。

内容提示：项目面向成年创作者，部分内容不适合未成年人。使用时请遵守所在地法律法规与平台规范。

如果只想直接浏览，可以打开 RuiC-PoseAtlas 在线演示。需要研究源码、定制数据或自行部署时，再按照后续步骤克隆仓库。

核心功能

  • 多角度对照：每组姿态包含 4 至 5 个角度，可在卡片或大图页面中切换。
  • 两种浏览模式：“按姿势”聚合同组角度，“单张”模式则展开每个角度。
  • 组合筛选：可按系列、分类和角度筛选，项目包含 4 个内容系列与 26 个子分类。
  • 跨语言搜索：中文、英文、日文名称会同时建立索引，也可以搜索姿态编号、分类和系列。
  • 三语界面：支持中文、English 和日本語即时切换，并会把选择保存到 localStorage。
  • 键盘操作：方向键可切换角度和姿态，Esc 可关闭大图。
  • 原图下载：大图页面提供 900 × 1200 PNG 文件下载。
  • 深链接：可通过 URL 直接分享指定语言、姿态与角度。
  • 响应式布局：支持桌面多列网格、移动端双列卡片和窄屏大图浏览。
  • 工程化校验：npm run verify 可检查数据、翻译、文件引用、图片尺寸和 i18n 键。

人体姿态图库浏览界面

准备运行环境

日常浏览只需要现代浏览器和一个静态 HTTP 服务器。README 推荐使用 Python 3；如果需要重新生成数据、恢复图片或执行完整性校验，则还需要 Node.js 18 或更高版本。

  • Chrome、Edge、Safari 或 Firefox 等现代浏览器
  • Python 3 或其他静态服务器
  • Node.js 18 及以上版本，仅用于脚本任务
  • 足够的磁盘空间，因为 PNG 原图约占 654 MB，缩略图约占 25 MB

本地安装与启动

第一步：克隆仓库

git clone https://github.com/HRuiCcc/RuiC-PoseAtlas.git
cd RuiC-PoseAtlas

仓库完整包含 1,439 张 PNG 原图和 1,439 张 JPEG 缩略图，因此首次克隆可能需要一些时间。

第二步：启动静态服务器

python3 -m http.server 8123 --bind 127.0.0.1

然后在浏览器中访问：

http://127.0.0.1:8123/

如果已经安装 Node.js，也可以直接运行项目提供的命令：

npm start

不要直接双击 index.html。页面通过 fetch() 读取 data/poses.json，在 file:// 协议下可能被浏览器同源策略拦截，从而出现空白页面。

基本使用方法

搜索与筛选姿态

  1. 在搜索框输入中文、英文、日文姿态名，或输入类似 P019 的编号。
  2. 使用顶部系列标签缩小内容范围。
  3. 继续选择分类和角度，以组合多个筛选条件。
  4. 在“按姿势”和“单张”之间切换，分别进行姿态组比较或逐图筛选。
  5. 在移动端点击“筛选”，展开折叠的筛选面板。

卡片与大图浏览

点击卡片底部的角度缩略图，可以直接在卡片中预览对应角度；点击卡片主图或标题，则会打开大图。若先在卡片中选好角度，再点击主图，大图页面会从该角度开始显示。

多角度姿态大图浏览

大图页面支持以下键盘操作：

  • ← 和 →：切换上一个或下一个角度。
  • ↑ 和 ↓：切换上一个或下一个姿态。
  • Esc：关闭大图。
  • Tab：在大图页面的控件之间循环聚焦。

页面还会显示姿态名称、编号、系列、分类、当前角度和图片规格。需要保存参考素材时，可点击“下载原图（PNG）”。

切换语言与分享深链接

右上角可以切换中文、英文和日文。语言选择优先读取 URL 参数，其次读取 localStorage，最后根据浏览器语言决定默认界面。

http://127.0.0.1:8123/?lang=en
http://127.0.0.1:8123/?lang=ja#pose=full_single_P019&angle=side

第二个示例会打开日文界面，并定位到 full_single_P019 的侧面角度。在线部署后也可以使用同样的参数和哈希结构分享指定内容。

理解项目结构

项目采用数据驱动设计，data/poses.json 是图库的核心数据源。筛选、搜索、卡片和大图页面都从这份数据生成。

RuiC-PoseAtlas/
├── index.html
├── assets/
│   ├── css/app.css
│   ├── js/app.js
│   └── js/i18n.js
├── data/poses.json
├── img/
├── thumbs/
├── scripts/
├── .github/workflows/
└── package.json
  • assets/js/app.js：负责数据加载、搜索筛选、页面渲染、大图交互和快捷键。
  • assets/js/i18n.js：集中保存三种语言的界面文案。
  • data/poses.json：保存 288 组姿态、三语名称及图片路径。
  • img/：保存 900 × 1200 PNG 原图。
  • thumbs/：保存 300 × 400 JPEG 缩略图。
  • scripts/：包含数据构建、图片恢复和完整性校验脚本。

重新构建与校验数据

数据脚本不依赖第三方包。修改源数据或英文名称后，可以执行：

npm run data
npm run verify

npm run data 会将 scripts/source/ 中的中日文记录与英文名称表合并，按姿态编号聚合角度，然后生成紧凑的 data/poses.json。

npm run verify 会检查姿态和图片数量、三语名称、系列与分类翻译、图片引用、文件重复、图片格式与尺寸，以及页面使用的 i18n 键是否完整。修改数据后应始终运行该命令，避免产生缺图、断链或缺失翻译。

添加一组新姿态

  1. 将 4 至 5 张 PNG 原图放入 img/。
  2. 将对应的 300 × 400 JPEG 缩略图放入 thumbs/。
  3. 在 scripts/source/ 的源记录中补充姿态条目。
  4. 在 scripts/en-pose-names.json 中加入英文名称。
  5. 运行 npm run data && npm run verify。

添加图片前必须确认自己拥有相应的使用与分发授权。项目源代码采用 MIT License，但图片、原始数据与名称不属于 MIT 许可范围。

恢复缺失的图片文件

如果全新克隆后发现部分图片缺失，可以运行：

npm run fetch-images

脚本会从姿态数据中收集图片路径，并发下载缺失文件，跳过签名正确的现有文件，并校验 PNG 与 JPEG 文件签名。下载失败时还会切换来源并重试。仓库也提供名为 Fetch image assets 的 GitHub Actions 工作流。

部署为静态网站

使用 GitHub Pages

仓库内置 .github/workflows/deploy-pages.yml。推送涉及站点的文件到 main 分支后，工作流会自动部署；也可以在 Actions 页面手动运行 Deploy to GitHub Pages。

该流程只打包站点运行所需的入口、资源、数据和图片，不会把 README、构建脚本及文档目录中的其他文件全部公开。

使用 Cloudflare Pages

  1. 在 Cloudflare Pages 中连接 GitHub 仓库。
  2. 将 Framework preset 设为 None。
  3. 将 Build command 留空。
  4. 将 Output directory 设置为 /。
  5. 保存设置并开始部署。

项目提供的 _headers 已为原图和缩略图配置一年强缓存，为数据文件配置五分钟缓存，并要求 index.html 每次重新校验。

其他托管平台

Netlify、Vercel、对象存储或 Nginx 都可以托管该项目。由于没有构建步骤，只需把仓库根目录作为静态站点目录。若使用自定义域名，建议将 index.html 中的 og:image 修改为绝对 URL，便于社交平台抓取封面。

进阶使用技巧

  • 降低部署体积：如果只需要网格浏览，可以仅保留缩略图并调整数据中的原图字段和下载逻辑，但大图与原图下载功能会因此不可用。
  • 利用按需加载：图库网格只请求 JPEG 缩略图，PNG 原图仅在打开大图或下载时加载；无需为了首屏速度删除原图。
  • 扩展新语言：需要同时修改 assets/js/i18n.js、姿态数据的 names 字段和语言切换器，之后运行完整性校验。
  • 保留相对路径：项目资源均使用相对路径，因此可以部署在域名根目录或子目录中。
  • 修改后先校验：无论新增图片、调整分类还是修改翻译，都应执行 npm run verify。
  • 注意发布范围：如果采用 GitHub Pages 的分支发布模式，应限制发布目录，避免把脚本、文档或无关仓库文件暴露为静态资源。

RuiC-PoseAtlas 移动端界面

版权与使用边界

项目的前端代码、样式、脚本和文档采用 MIT License；图片、原始数据与名称的版权归原作者所有，不在 MIT 许可范围内。原作者允许将作品作为创作参考，包括商用创作、编辑与参考，但禁止再分发、转载或转售图片数据本身。商用前应阅读原始站点说明并自行确认合规性。

原始项目为 POSE-DB-01，原作者为 ギア。RuiC-PoseAtlas 是非官方整理版本，主要完成数据整理、英文名称补充与前端重写。

总结

RuiC-PoseAtlas 将分散的多角度姿态素材整理成可搜索、可筛选、可下载的三语静态图库。普通用户可以直接用它辅助构图和造型，开发者则可以从其数据驱动架构、原生 ES Modules、国际化、可访问性和静态部署方案中学习。完成本地启动后，建议先熟悉键盘浏览与深链接，再根据需要扩展数据或部署自己的版本。