用 WorkBuddy 把一张太空照做成可拖拽的 3D 桌面壁纸：从认错飞船到像素级对齐

全程只对 WorkBuddy 说人话，没有手写一行建模代码；本文重点不在"它做到了"，而在它怎么把一件看起来需要专业三维软件的活儿，变成了一场可以量化的对话。文末附可直接复用的调试命令。

一、先看效果

我给 WorkBuddy 丢了一张太空照片：一艘飞船悬浮在地球上方，黑色天幕、蓝色大气辉光。需求只有一句话：

识别这个飞船，做一个交互式桌面，鼠标可以拖动飞船各个角度观看。

最终交付是这样的——飞船悬浮在原照片的同一条地球弧线上，大小、位置和照片里的那艘完全一致：

滚轮放大后能看到舱体蒙皮、对接机构、姿控喷口这些细节：

换个视角拖一拖，

能看到机身背面的截锥段——证明它是实时渲染的 3D 模型，不是把原图抠出来贴上去的：

二、需求拆解：四个"看起来随意、其

实很苛刻"的约束

我追加了几条要求，事后看每一条都卡在点子上：

1. 背景必须用原图——不是重画一个太空场景；

2. 细节要丰满、真实——不能是个白球糊弄；

3. 鼠标不拖拽时飞船完全静止——不要自动旋转、不要浮动动画；

4. 飞船大小比例以原图为准——这条最难，意味着 3D 世界和 2D 照片必须严格对齐。

第 1 条和第 4 条组合起来是个经典难题：照片里已经有一艘飞船了，3D 模型叠上去必然"一图两船"。

三、第一版就翻车了：它认错了飞船

WorkBuddy 第一版把飞船识别成了 SpaceX 载人龙飞船，也按龙飞船建了模：钟形舱体、四个舷窗、Draco 推进器吊舱，像模像样。

但我把原图放大 3 倍再看——钟形舱体？没有。四个舷窗？没有。真实特征是：顶部一个小球舱，开口朝向镜头，能看见腔内的对接机构和探杆；下方一个大得多的球状主体，前端有深色圆形舱面、红色防热环带、中央发动机组合，四周伸出四根十字杆状天线。

这是联盟/神舟谱系的双球形舱段构型，和龙飞船完全是两个物种。第一版模型整个推倒重建。这件事给我最大的教训是：让 AI 识别图像时，一定要让它先放大关键区域逐项核对特征，而不是直接给结论。

四、四个关键技术点

4.1 背景"双船"问题：一块黑色渐变遮罩

照片里飞船周围是纯黑太空。WorkBuddy 的做法是：在 3D 画布后面放一层径向渐变的黑色圆形遮罩（中心全黑、边缘透明），精确盖住照片里那艘旧飞船。因为周围本来就是黑色，遮罩边缘完全隐形——零成本解决了"一图两船"。

4.2 像素级对齐：先量照片，再算世界坐标（全文最硬核的部分）

"飞船大小比例以原图为准"是这么实现的——不是目测调缩放，而是两步测量：

第一步，测照片。用 Python 逐行统计飞船区域的亮像素，得到精确包围盒和轮廓：

测出：大球直径 100px（占图宽 5%）、全船包围盒 125×138px、球心在 (50.0%, 49.7%)。

第二步，算映射。网页背景用 background-size: cover，那么给定窗口尺寸就能反推照片的显示缩放；再结合相机的 FOV 和距离，算出"这个距离下 1 像素对应多少世界单位"，最后：

飞船按"大球直径 2.24 米"建模，缩放系数让它在屏幕上永远精确占据照片里那 100 像素。换分辨率、换窗口大小，公式重算一遍即可。

4.3 拖拽旋转：四元数 premultiply，松手即静止

"拖到哪转到哪、松手立即停"用四元数最干净。每帧把鼠标位移转成绕屏幕 X/Y 轴的旋转，前乘到飞船姿态上：

不用欧拉角就不会有万向节锁，不用阻尼就没有"松手还在转"——正好满足"静止"的要求。

4.4 细节全靠程序化贴图，不找一张素材

白色蒙皮的面板拼缝、铆钉、污渍，深色防热层的放射状烧蚀纹，全部是 Canvas 2D 现画的（渐变底色 + 随机线条 + 径向噪点），生成 CanvasTexture 贴上去。对接腔用"环 + 内壁圆筒 + 深色底 + 探杆"四层零件叠出纵深感。好处是整个作品只有一个 HTML 文件加一张背景图，拷到哪都能用。

五、一个可复用的调试套路：无头浏览器闭环

传统做法是人肉开着网页看效果，AI 看不见，只能猜。这次 WorkBuddy 用了一个很聪明的闭环：

渲染 → 截图 → 量测 → 和原图包围盒对比 → 修参数，全自动循环，直到两边包围盒误差收敛到几个像素。它还给自己留了调试后门：URL 加 ?tilt=0.5&roll=0.3#big 就能改初始角度、放大渲染，批量出图挑最好的一版。这套"让 AI 看见自己产出"的思路，做任何视觉类需求都通用。

六、导出静态壁纸：Win10 零安装方案

交互版是 HTML，Win10 原生不支持网页壁纸。不想装 Lively Wallpaper 这类工具的话，可以让 WorkBuddy 用无头浏览器按你的分辨率渲染一张纯净静态图（加个 ?clean 参数隐藏全部界面文字），右键"设为桌面背景"即可。我两张分辨率各出了一张，一次成型。

七、坑清单（都是踩过的）

l 识别图像先放大核对特征，否则像这次一样整个方向都错；

l 背景图和 HTML 必须放同一目录，相对路径才生效；

l 原图飞船的遮罩椭圆别太大，否则会压到下方地球大气辉光的亮边；

l --virtual-time-budget 要给够，否则 WebGL 场景没渲染完就截图，得到黑屏；

l headless 模式要加 --enable-unsafe-swiftshader，不然软件渲染下 WebGL 直接罢工。

八、附赠：GitHub 大文件下载走 API 通道

做壁纸时我想装 Lively Wallpaper，但当前网络的代理把 github.com 的 release 直链全拦了（CONNECT 502）。解决办法是走 API 通道——它和网页走的是不同链路，实测可用：

九、小结

整个过程没有一行手写的建模代码、没有用任何三维软件，全部通过和 WorkBuddy 的自然语言对话完成。它最打动我的不是"会建 3D"，而是三件事：敢于推翻自己的第一版识别、用测量代替目测、给自己搭了一个能自动验证的闭环。这套方法论拿去做任何"复刻照片/设计稿"的需求都成立。

如果你也想试：打开 WorkBuddy，把你的照片丢进去，把约束一条条说清楚——剩下的，交给它折腾。