← 返回主页

当我给装修设计工具换上 AI 素材，它变成了娃娃屋

前几天我净室复刻了一个户型 3D 装修设计工具——功能齐全，但 2D 平面图上全是色块家具，像个工程图纸。于是我接上内网的 qwen-image-2.0-pro，一口气生成了 26 张可爱风素材：1 张主视觉、20 张透明背景俯视家具图标、5 种无缝地板纹理。换装之后，工程图纸变成了娃娃屋。

🏠 在线使用：bayshier.github.io/floorplan-3d · 📦 源码：github.com/bayshier/floorplan-3d

一、为什么素材比功能重要

复刻完功能后我自己玩了一会，发现一个尴尬的事实：2D 平面图上的家具是纯色矩形加名字标签——"双人床"三个字印在一个棕色方块上。功能上它是对的：可拖动、可旋转、可拆墙、可统计面积。但视觉上它是一张施工图，不是一个"想住进去的家"。

这其实是所有工具型产品都会遇到的问题：功能的完成度决定"能不能用"，素材的气质决定"想不想用"。而素材恰恰是独立开发者最缺的——请画师画 20 张风格统一的家具图标，成本远高于写 20 个功能。

所以这次升级的核心实验是：用内网图像模型，把素材成本压到接近零。

二、素材生产流水线

内网中转站上有 qwen-image-2.0-pro 和 wan2.7-image-pro 两个图像模型可用。我写了个小脚本读本地配置里的网关地址和密钥，一条命令出图，内置 429 限流退避重试。总共 26 张素材，全部一条提示词流水线生成：

1. 主视觉（1 张）

"可爱卡通风格的三居室户型剖面插画，温馨配色，圆润家具，柔和光线，游戏标题画面风格"——一次出图直接用作启动屏主视觉，质量超出预期：马卡龙色的等距小屋，每个房间都塞满了细节。

2. 家具俯视图标（20 张）

2D 平面图需要正上方俯视视角的家具图标。关键是用同一段风格前缀保证 20 张图风格统一：

可爱卡通游戏素材，正上方正俯视图，柔和马卡龙配色，
圆润造型，边缘干净，纯白色背景，居中构图，无文字无边框无阴影
—— 双人床俯视图，木质床架配粉色床品和两个白色枕头

后缀只换家具描述。这个"固定前缀 + 单一变量"的写法，是批量生成风格一致素材的关键。

3. 无缝地板纹理（5 张）

木地板 / 地砖 / 大理石 / 水磨石 / 地毯，提示词强调"无缝平铺、四边可平铺延续、无接缝无阴影"。生成结果不保证数学意义上的无缝，但作为游戏贴图视觉上完全够用。

三、集成：三处改造

1. 启动屏主视觉

工具原本打开就是编辑器，冷启动没有"游戏感"。现在启动时先展示 AI 主视觉 + 「开始设计」按钮，点击才进入编辑器——一行判断的成本，把"打开工具"变成了"打开游戏"。

2. 2D 家具图标化（本次最大的视觉升级）

渲染逻辑改为：有 AI 图标的家具，直接把透明 PNG 以 cover-fit 方式画在家具矩形内，附带柔和投影；没有图标的类型回退到色块。家具矩形是带旋转的，所以绘制包在 translate + rotate 变换里，图标跟着家具一起转。

3. 地板纹理双向接入

• 2D：createPattern 图案填充，用 DOMMatrix 把纹理锚定到世界坐标（每格 ≈2.4m）——不这样做的话平移画布时地板纹理会"跟着屏幕滑动"，非常假。
• 3D：TextureLoader 异步加载，RepeatWrapping 按房间尺寸设置 repeat；纹理加载完成后自动重建地板，加载期间先显示纯色兜底。

四、踩坑：白底图标不能直接用

图像模型不支持真正的透明通道，生成的是纯白背景图标。直接贴到木纹地板上，每件家具都带着一块白色方砖，格格不入。解法是写了一个边界泛洪去底脚本：

1. 从图像四边的近白像素开始 BFS 泛洪，把与边界连通的近白区域置为透明——从边界出发很重要：直接全图抠白会把枕头、马桶圈这些内部的白色也抠掉；
2. 第一轮容差 30 抠白底，第二轮容差 45 专门清理浅灰色投影残留；
3. 紧邻透明区的浅色像素降为半透明，羽化抗锯齿；
4. 裁切到内容外接框，留 1.5% 边距。

这个"边界连通"的思路本质和可破坏地形的掩码是同一件事：区域问题不要逐像素判断，要从边界做连通性。

五、娃娃屋里住进了宠物

素材换装之后，娃娃屋还是有点空——房子是可爱的，但没有生活气息。于是又生成了一批宠物与玩偶元素：蜷睡的橘猫、黑白奶牛猫、趴睡的柯基、猫砂盆（带三颗小惊喜）、瓦楞纸猫抓板、粉色猫窝、泰迪熊玩偶、宠物双碗食碗。

元素	2D	3D
橘猫 / 奶牛猫	AI 俯视图标（蜷睡姿态）	椭球身子 + 圆头 + 三角耳 + 盘起的尾巴
柯基	AI 俯视图标	长身子 + 垂耳 + 黑鼻头
猫砂盆	AI 俯视图标	蓝灰围栏 + 砂底 + 三颗「遗产」小球
猫抓板 / 猫窝 / 玩偶熊 / 食碗	AI 俯视图标	圆环 / 软垫 / 球体拼装

默认户型里，橘猫睡在主卧床上、奶牛猫霸占次卧床、柯基趴客厅、猫砂盆藏在厨房——猫咪的天性就是睡在你刚铺好的床上。3D 漫游的时候走到床边，会发现它们真的在那里。

技术上的小乐趣在于 3D 参数化卖萌：猫没有现成模型，就用「椭球身子 + 球头 + 圆锥耳 + 圆环盘尾」拼——十五行代码一只猫。扁平化的球体拼装在低多边形风格里毫不违和，可爱不需要写实。

六、踩坑清单

坑	现象	解法
白底图标上地板	每件家具带一块白色方砖	边界泛洪去底 + 羽化 + 裁切
投影残留	家具底下浅灰影挂在地板上	第二轮容差 45 泛洪
纹理随屏幕滑动	平移画布时地板"漂移"	pattern 用 DOMMatrix 锚定世界坐标
3D 纹理异步加载	地板先纯色后突然变 textured	加载完成回调自动重建地板组
图标风格漂移	20 张图标风格各不相同	固定风格前缀 + 只变家具描述

七、小结

26 张素材、约 6 分钟生成时间、零绘画成本——换来的变化是：启动画面像游戏宣传图，平面图上的家具像从娃娃屋里搬出来的，连地板都有了材质的温度。

AI 图像模型对独立开发者最大的价值，不是"生成艺术"，而是把"素材"从成本项变成了提示词。下一个想做的功能，再也不用先问"素材从哪来"了。