HRuiCcc/RuiC-PoseAtlas

选用指南

AI 根据 README 整理 · 2026/10/28 23:46:49

适用场景

适用于AI绘画、3D建模、插画漫画、摄影构图参考，以及前端学习者参考无框架静态图库实现。

查看 README 依据

由 GitHub Pages 自动部署，直接打开即可浏览；支持 `?lang=zh|en|ja` 与姿态深链接。页面中的图片、缩略图、数据与本地版本一致。 ### 这个项目适合谁 - **AI 绘画创作者**：作为姿态、构图、镜头高度的参考，与角色、服装、场景参考配合使用。 - **3D 建模 / 动画学习者**：快速查看体块关系、比例、四肢走向与机位变化。 - **插画与漫画作者**：寻找动态、透视与多人互动的构图灵感。 - **摄影与视觉设计**：参考站位、镜头高度、人物与画面的关系。 - **前端学习者**：一个无框架、数据驱动、三语 i18n 的完整静态项目范例。 --- ## 界面预览 > 以下截图使用「标准全身」系列与站立姿态，便于展示界面结构。 <p align="center"> <img src="docs/preview-gallery.jpg" alt="图库网格界面" width="100%"> </p> <p align="center"> <img src="docs/preview-modal.jpg" alt="大图浏览与多角度切换" width="72%"> <img src="docs/preview-mobile.jpg" alt="移动端大图浏览" width="24%"> </p> --- ## 项目亮点

| `thumbs/` | 1,439 张 300 × 400 JPEG | 25 MB | | `img/` | 1,439 张 900 × 1200 PNG | 654 MB | | `data/` | 三语数据 JSON | 186 KB | | `assets/` | CSS / JS / favicon | 约 60 KB | 网格只加载缩略图；原图仅在大图页和下载时请求。克隆仓库需要下载完整图片，首次拉取会稍慢。 --- ## 适用场景 | 场景 | 可以怎么用 | | --- | --- | | AI 绘画 | 作为姿态 / 构图 / 镜头参考，配合角色、服装、场景参考一起使用 | | 3D 建模 | 快速对齐比例、体块与机位，辅助 blockout 和镜头设计 | | 插画 / 漫画 | 查看动态、透视、四肢关系，寻找同一姿态的不同角度 | | 摄影 | 参考站位、镜头高度与画面构图 | | 前端学习 | 参考一个无框架、三语、数据驱动的静态图库实现 | --- ## 交互与快捷键 ### 图库 - 点击卡片主图或标题：打开大图。 - 点击卡片底部的角度缩略图：在卡片内预览该角度；再点主图会直接打开该角度。 - 顶部系列标签：切换内容系列。 - 搜索框：支持中文、英文、日文名称、编号、分类。 - 「筛选」：移动端展开分类、角度与视图模式。

目标用户

面向AI绘画创作者、3D建模/动画学习者、插画与漫画作者、摄影与视觉设计人员及前端学习者。

查看 README 依据

由 GitHub Pages 自动部署，直接打开即可浏览；支持 `?lang=zh|en|ja` 与姿态深链接。页面中的图片、缩略图、数据与本地版本一致。 ### 这个项目适合谁 - **AI 绘画创作者**：作为姿态、构图、镜头高度的参考，与角色、服装、场景参考配合使用。 - **3D 建模 / 动画学习者**：快速查看体块关系、比例、四肢走向与机位变化。 - **插画与漫画作者**：寻找动态、透视与多人互动的构图灵感。 - **摄影与视觉设计**：参考站位、镜头高度、人物与画面的关系。 - **前端学习者**：一个无框架、数据驱动、三语 i18n 的完整静态项目范例。 --- ## 界面预览 > 以下截图使用「标准全身」系列与站立姿态，便于展示界面结构。 <p align="center"> <img src="docs/preview-gallery.jpg" alt="图库网格界面" width="100%"> </p> <p align="center"> <img src="docs/preview-modal.jpg" alt="大图浏览与多角度切换" width="72%"> <img src="docs/preview-mobile.jpg" alt="移动端大图浏览" width="24%"> </p> --- ## 项目亮点

使用方式

通过浏览器访问在线演示或本地静态服务器运行；支持键盘快捷键浏览大图，可切换语言、搜索筛选、下载原图。

查看 README 依据

- **288 组姿态，1,439 张参考图** 每组 4–5 个视角，按姿态编号归档，避免同组图片散落。 - **五视角对照** 正面、斜侧、侧面、俯视、仰视一次看全；卡片底部有角度缩略条，点一下即可预览。 - **两种浏览模式** 「按姿势」以姿态为单位展示；「单张」展开每一个角度，适合逐张筛选。 - **跨语言搜索** 中文、English、日本語三套名称同时建立索引；搜姿态名、编号、分类、系列都能命中。 - **系列 / 分类 / 角度筛选** 四个内容系列、26 个子分类、五个视角，可自由组合；移动端折叠为「筛选」面板。 - **键盘友好的大图浏览** `←` `→` 切换角度，`↑` `↓` 切换姿态，`Esc` 关闭；自动预加载相邻原图。 - **原图下载** 大图页提供 900 × 1200 PNG 原图下载，适合直接作为创作参考。 - **中 / 英 / 日即时切换** 右上角切换语言；选择会写入 `localStorage`，也可通过 `?lang=zh|en|ja` 分享指定语言。 - **深链接** 例如 `?lang=ja#pose=full_single_P019&angle=side`，可直接分享某一姿态的某个角度。 - **响应式布局**

- 「按姿势 / 单张」：在两种浏览模式间切换。 ### 大图页 | 按键 | 功能 | | --- | --- | | `←` / `→` | 上一个 / 下一个角度 | | `↑` / `↓` | 上一个 / 下一个姿态 | | `Esc` | 关闭大图 | | `Tab` | 在大图页控件间循环聚焦 | 大图页同时提供： - 五个角度的缩略图切换； - 姿态名称、系列、分类、编号、角度与规格； - 「下载原图（PNG）」按钮； - 当前角度与总角度进度。 --- ## 三语支持 界面右上角提供 **中文 / EN / 日本語** 切换，以下内容会同步更新： - 页面标题、副标题、使用提示与注意事项； - 系列名、分类名、姿态名、角度名； - 搜索占位符、筛选选项、结果计数； - 大图页元信息、下载按钮与键盘提示； - 页脚来源说明与版权提示。 语言优先级： 1. URL 参数 `?lang=zh|en|ja` 2. `localStorage` 中记住的选择 3. 浏览器语言（`ja` → 日本語，`zh` → 中文，其余 → English） 示例： ```text http://127.0.0.1:8123/?lang=en

http://127.0.0.1:8123/?lang=ja#pose=full_single_P019&angle=side ``` --- ## 快速开始 ### 环境要求 - 任意现代浏览器（Chrome / Edge / Safari / Firefox） - Python 3（用于启动静态服务器）或任意静态服务器 - Node.js ≥ 18（仅在重新生成数据、运行校验时需要） ### 本地运行 ```bash git clone https://github.com/HRuiCcc/RuiC-PoseAtlas.git cd RuiC-PoseAtlas python3 -m http.server 8123 --bind 127.0.0.1 ``` 然后打开： ```text http://127.0.0.1:8123/ ``` 也可以使用： ```bash npm start ``` > **注意**：请通过 HTTP 打开，不要直接双击 `index.html`。页面使用 `fetch()` 读取 `data/poses.json`，在 `file://` 协议下会被浏览器的同源策略拦截。 --- ## 项目结构 ```text RuiC-PoseAtlas/

部署要求

需要任意现代浏览器，本地运行需Python 3或任意静态服务器；重新生成数据或运行校验需Node.js ≥ 18。

查看 README 依据

http://127.0.0.1:8123/?lang=ja#pose=full_single_P019&angle=side ``` --- ## 快速开始 ### 环境要求 - 任意现代浏览器（Chrome / Edge / Safari / Firefox） - Python 3（用于启动静态服务器）或任意静态服务器 - Node.js ≥ 18（仅在重新生成数据、运行校验时需要） ### 本地运行 ```bash git clone https://github.com/HRuiCcc/RuiC-PoseAtlas.git cd RuiC-PoseAtlas python3 -m http.server 8123 --bind 127.0.0.1 ``` 然后打开： ```text http://127.0.0.1:8123/ ``` 也可以使用： ```bash npm start ``` > **注意**：请通过 HTTP 打开，不要直接双击 `index.html`。页面使用 `fetch()` 读取 `data/poses.json`，在 `file://` 协议下会被浏览器的同源策略拦截。 --- ## 项目结构 ```text RuiC-PoseAtlas/

已知限制

图片与原数据版权归原作者所有，禁止再分发、转载、转售图片数据本身；商用需自行确认合规性。

查看 README 依据

### 为什么打开 `index.html` 是空白？ 页面通过 `fetch()` 读取 `data/poses.json`，`file://` 协议下会被 CORS 拦截。请用任意静态服务器打开，例如 `python3 -m http.server`。 ### 可以商用吗？ 图片与原始数据的版权归原作者所有。原作者允许将作品用于创作（包括商用、编辑与参考），但**禁止再分发、转载、转售图片数据本身**。如果你要商用，请先阅读原始站点的说明，并自行确认合规性。 ### 可以只部署缩略图吗？ 可以。网格浏览只需要 `thumbs/`；如果不需要原图下载，可以从数据中移除 `full` 字段或调整下载按钮逻辑。但大图页和下载功能会不可用。 ### 如何新增语言？ 1. 在 `assets/js/i18n.js` 中增加语言字典； 2. 在 `data/poses.json` 的 `names` 中增加对应字段； 3. 在语言切换器中加入按钮； 4. 运行 `npm run verify` 检查键是否完整。 ### 为什么不用 React / Vue？ 这个项目的交互复杂度并不需要框架：数据量固定、视图是单一列表与灯箱、没有服务端状态。纯原生实现让部署更简单，也更容易长期维护。 ### 在线演示在哪里？