# 旋色 · Three.js 径向信息图

从 Blender 的 `Five Step • Radial Infographic` 场景导出的交互式信息图。本演示与其他实验共用工作区根目录的依赖和服务。页面和依赖均在本地，运行时不需要 Blender 或 CDN。

## 启动

在工作区根目录（本目录的上一级）运行 `npm start`，打开 [径向信息图](http://127.0.0.1:8877/radial-infographic/)。
首次安装依赖运行 `npm ci`；自定义端口运行 `npm start -- --port 8880`。
详见 [工作区说明](../README.md)。

## 操作

- 点击五色按钮或模型扇形选择分段，独立调整半径（3.5–6）和份额权重（5–60）。
- 五块权重自动换算成角度，总和保持 360°。半径决定外部尺寸，占比决定角度，两者独立。
- 中心半径范围 0.8–2.3，控制参考图中的白色圆盘。扇形内边缘随之调整，中心文字同步缩放。
- 旋转、缩放、正面/立体视角、文字和图标开关、均分与恢复原值。
- 小于 28° 的扇形会自动收起正文和图标，小于 14° 时也收起编号，以避免拥挤。隐藏的装饰不参与导出。
- “导出当前模型”下载已调整的 GLB，保留当前形状、颜色与可见装饰；“原始模型”下载 Blender 导出的初始 GLB。

尺寸单位是模型单位，不代表实际物理尺寸。中心沿用参考图的实心圆盘形态。

## 文件

- `assets/radial_infographic.glb`：约 5.6 MB，包含真实网格、文字与图标；Y 轴朝上。
- `assets/model-info.json`：默认尺寸、分段信息和文字布局锚点。
- `export_model.py`：通过 Blender MCP 执行的导出脚本，使用临时副本降低曲线细分，完成后清理临时数据，保留原始场景。
- `radial-controller.js`：参数验证、扇形网格变形、中心缩放和装饰联动。
- `export-snapshot.js`：将当前变换烘焙到网格，保证导出的 GLB 可移植。
- `app.js` / `index.html` / `style.css`：独立页面、交互和显示。

## JavaScript 接口

```js
await window.radialReady;
radial.setStep(0, { radius: 5.6, weight: 40 }); // 下标 0–4
radial.setCenterRadius(2.1);
radial.setDetails(false);
radial.equalize();
const state = radial.getState();
radial.setState(state);
radial.reset();
const glbArrayBuffer = await window.exportRadialGLB();
window.addEventListener('radialchange', event => console.log(event.detail));
```

非法输入会报错且不改变已生效参数。`getState()` 返回独立副本。刷新网页恢复初始参数。导出的自定义 GLB 是当前形状快照；本项目的可调参数编辑器从原始 GLB 和元数据初始化。

## 验证

在工作区根目录运行：

```sh
npm test
```

使用真实 GLB 验证尺寸边界、极端占比、闭合角度覆盖、有限几何、非法输入、精确复位及调整后 GLB 导出再加载的一致性。