三种形态
SVG · SVG + WebGL · 3Dskill 的三种出图方式不是滤镜差别,而是画法不同:零件全是实心面,用四色明暗分出面来; 线条画不出的东西(火、水、光)交给一层 WebGL,跟 SVG 共用同一个等距相机; 要真转起来的那几个零件,则每帧重新投影、重新着色。
四种调性
同一台玻璃按钮测试台 · 四种配色同一份几何、同一套交互,只换调色板:明纸质是工作室里的米色卡纸,暗工程是炭黑机柜, 蓝晒是工程图纸的普鲁士蓝,霓虹夜只靠荧光读数认零件。零件数、投影、读数一个字都没改。
明暗双主题
同一把弹子锁 · light / darkskill 先设计亮色主题(连 shader 一起),再折算暗色。这里是同一把五弹子锁: 钥匙插到底,五颗弹子对齐,锁芯才转得动——一个 cache key 命中就不干活的比喻。
官方题材
仓库自带的八件里挑了四件官方示例是照着真东西造的:1984 年的台式机(能打字)、剖开前脸的街机柜(投币一路滚到钱箱)、 龙门绘图仪(一个头挨个去十六口井取墨)、水波槽(两只振子的干涉投到纸屏上)。
它凭什么像真的
规则,不是玄学| 规矩 | 做法 | 在这页上的样子 |
|---|---|---|
| 物体即解释 | 不画方框箭头,先造一台「它的运转就是那个概念」的机器 | 弹子锁=缓存键;十六口井=十六个渲染目标 |
| 四色明暗 | 每个零件只有顶面、左前、右前、描边四个层次,靠它分出面 | 所有图的零件都只有三到四个色阶 |
| 画家顺序 | 按相机方向从远到近排序,没有 z-buffer,全靠排序对 | 发动机的管路压住喷管、滑车压住导轨 |
| 数字同源 | 读数、指针、运动都由同一个模型算,改模型才会改数字 | 表针角度=量块高度;推力=油门×230 tf |
| 克制动效 | 指数跟随或真弹簧,不做弹跳;离屏就停,减动效就静 | 每张图都有空闲巡游,指针一离开就自己慢慢走 |
| 自己挑错 | 构建时跑几何审计:不许穿模、不许悬空、不许折管 | 本页是手写的等距图,没上审计 |
一句提醒:官方 skill 装起来是 npx skills add wheresryan22/anatomy -g -a claude-code,
零依赖、不要 API Key;但一张 Hero 级图它自己估 2–4 小时,因为零件是逐个手写坐标的。
这页上的十三张,是按同一套规则用一套等距小工具现画的,几何量比官方示例小一档。