一、用途与定位 isometric-ops 是一个用于创建、精修、合成并导出等距插画资产、面向网页和游戏的技能。它覆盖从投影数学、SVG/CSS/three.js 生成路线,到像素艺术与 Blender 预渲染管线、引擎瓦片地图集成、带结构控制的 AI 生成工作流、遵守许可规范的资产采购,以及配套的 iso-studio 场景合成器。
该技能只负责“等距增量”本身;通用 three.js 与创意编程脚手架属于 genart-ops,应用/游戏规模的 three.js(GLTF 管线、react-three-fiber、InstancedMesh)属于 threejs-ops,色彩科学与 OKLCH 渐变构建属于 color-ops。本技能只交叉引用,不重复陈述。
二、投影决策(永远的第一步) 在绘制、生成或建模任何东西之前,必须先选择投影,因为它会固定网格数学、瓦片宽高比、摄像机装置与抗锯齿策略。三类常见投影:
- 真等距投影(true isometric):地面轴角 30°,三轴互成 120°,适用于网页矢量插画、图表、图标、主视觉图。
- 2:1 二测投影(游戏中常被称作 isometric):地面角 26.565° = arctan(1/2),瓦片宽 = 2 × 高,适用于游戏瓦片与精灵世界。
- 像素对齐 1:2:22.6°,适用于手动放置的像素艺术基元(方块、砖、斜面)。
一个典型失败模式是把游戏瓦片画成 30°,却放在 2:1 菱形网格上,单块看不出问题,50×50 地图上会完全错位。术语上要求首次出现时写“2:1 二测(游戏中常被称作等距)”,之后简称“2:1 二测”,不应把 2:1 游戏投影无修饰地称为“等距”。
三、规范常量 立方体倾斜角 35.264° = arctan(1/√2);投影缩短比例 81.65% = √(2/3);等距绘图比例 100%;真实地面角 30°;顶面压缩 86.602% = cos(30°);Figma 高度比例 57.735% = tan(30°);CSS 反向缩短 1.22474 = √(3/2)。Blender 正交摄像机两套装置:2:1 二测 = RotX 60°、RotY 0°、RotZ 45°;真等距 = RotX 54.736°、RotY 0°、RotZ 45°。
四、任务路由(六条路线) 路线 A——网页插画(矢量/CSS/SVG):先定真等距,固定光照方向与调色板;需要可选中、可访问、SEO 可见时用 CSS,静态图形与图标用 SVG;CSS 路径用 preserve-3d 与 rotateX(54.7356deg) rotateZ(-45deg) scale3d(1.22474,...);SVG 路径可用 @elchininet/isometric 或手写平面矩阵;导出顺序为简化路径 → 导出 → SVGO/SVGOMG → 位图衍生。 路线 B——游戏瓦片集:先写规格(投影与精确角度、瓦片宽高、单位高度、锚点在脚部、脚印语法、透明边距、调色板、单一光照方向、命名规范),再生成、质检、打包图集、接入引擎;运行 tile-validate.py 校验,sheet-pack.py 打包。 路线 C——AI 管线:按输出类型选模型,使用脚手架提示词、ControlNet 结构控制、精修、矢量化、许可检查。 路线 D——3D 预渲染:Blender 或 three.js 正交装置,烘焙 N 方向精灵,回到路线 B 的校验步骤。 路线 E——场景合成:使用 iso-studio 进行吸附网格摆放、自动深度排序、PNG/场景 JSON 导出。 路线 F——资产采购:优先 CC0,交付前确认方案、许可与 AI 训练条款。
五、脚本与资产 iso-math.py:常量、瓦片↔屏幕换算、SVG 网格、CSS/SVG/Illustrator/Figma 变换配方。 tile-validate.py:瓦片尺寸、alpha 光晕、边缘溢出、锚点、调色板检查,违规退出码 10。 sheet-pack.py:将瓦片目录打包为精灵图 PNG 与 JSON 图集。 check-iso-facts.py:常量与引用校验,离线断言或在线检查 npm 包。 资产包含 prompt-library.md 提示词脚手架、palettes/three-tone-presets.json 八套三色预设、grids/ 预生成网格、blender-iso-rig.py 无头 Blender 装置与方向烘焙脚本。
六、iso-studio 场景合成器 独立零依赖应用(github.com/0xDarkMatter/iso-studio),用 node <iso-studio>/server.mjs 运行。
七、常见陷阱索引(节选) 把 2:1 游戏瓦片误称为等距并按 30° 切割;只做斜切而漏掉 0.86603 垂直缩放;用中心锚点破坏 y 排序(应锚在脚部);把高度并入深度键(应为 (x+y, z, layer, zBias));Unity 近裁剪面遮挡;正交视锥在缩放时未重算;AI 半透明边缘产生接缝;误把“可商用”当作“可用于数据集”(如 DrawKit 禁止 AI 训练);Flux.1-dev 衍生模型为非商用;像素艺术 30° 线锯齿以及超过 4 倍放大产生透视破坏细节。
八、限制 本技能不负责通用 three.js 脚手架、应用级 three.js 管线与色彩科学,这些分别属于 genart-ops、threejs-ops 与 color-ops。部分外部工具与许可条款的具体价格、平台细节暂未提供。