# 弧与扇 · 三组立体信息图

从 `business_infographic.blend` 的 `Business Infographic • Three Studies` 场景通过 Blender MCP 导出，作为三维实验室的第五个展示。

在工作区根目录运行 `npm start`，打开 [弧与扇](http://127.0.0.1:8877/business-infographic/)。与其余四个实验共用首页、导航、8877 端口及 Three.js 依赖，运行时无需 Blender 或互联网。详见 [工作区说明](../README.md)。

## 操作

- 默认显示原图的完整布局：左上三层圆弧、左下四块扇形、右侧六层半圆。
- 使用“选择图形”单独展示一组，自动调整取景，文字、图标和连接线随所在组一起显示。
- 拖动旋转、滚轮或双指缩放、右键平移；可以切换正面和立体视角。
- “重置视角”保留当前图形并回到正面；“恢复完整布局”显示全部图形并恢复正面取景。
- 下载完整模型获得原始 GLB。页面切换不修改 Blender 文件，刷新后恢复默认状态。

## 资源与导出

- `assets/business_infographic.glb`：约 8.5 MB，包含 3 个组、121 个网格，其中 13 个主体色块。文字已转换为网格，无需网页额外加载字体；倒角和实体厚度已保留。
- `assets/model-info.json`：分组、主体数量、原始集合与来源信息。
- `export_model.py`：复制并求值当前 Blender 场景的三组对象，烘焙修改器，将曲线和文字转为网格。排除背景、灯光和相机。通过 MCP 执行时需设置 `__file__` 为导出脚本绝对路径。
- 导出使用临时场景，结束后清理临时对象并恢复原场景，不保存或改写原始工程。
- 坐标采用 Y 轴朝上，构图位于 XY 平面，厚度沿 Z 轴；这样正面观察与参考图片一致。
- Three.js 使用实时灯光，外观与 Blender Cycles 渲染会有差异。原图模糊的小字为替代文案，部分图标为近似还原。

## JavaScript 接口

```js
await window.infographicReady;
window.infographic.setState({ diagram: 'arc' });
window.infographic.setState({ diagram: 'fan' });
window.infographic.setState({ diagram: 'radial' });
window.infographic.reset();
window.infographic.getState(); // { diagram: 'all' }
window.addEventListener('infographicchange', event => console.log(event.detail));
```

`diagram` 只接受 `all`、`arc`、`fan`、`radial`；非法参数拒绝且不改变状态。`getState()` 返回副本。控制器只改变分组显隐，不变更模型几何。

## 验证

根目录运行 `npm test`，或 `node --test business-infographic/tests/*.test.js`。测试使用真实导出的 GLB，检查三组模型、13 个色块的厚度、文字、材质、有效顶点、分组显示与复位。统一 HTTP 测试检查五个展示的入口、交叉导航、模块、模型下载和资源路径。