把家搬进浏览器：我用 AI 和 Three.js 做了「噜噜的家」

最近折腾装修，手机里存了不少户型图、全景和实拍照片。看单张照片时，柜子的颜色、灯具的样子都很清楚；换个房间，再回头看，又得在脑子里把它们拼起来。我开始想，能不能把这些参考做成一个网页，打开就能在家里转一圈？

于是有了「噜噜的家」。它能从上往下看全屋布局，也能进入房间，切换门扇开合和日夜灯光，看看家具之间的关系。我还把自家的猫噜噜放了进去，让它走动、休息，点一下还能互动。可以直接打开体验。

项目在 2026 年 9 月 8 日完成第一轮搭建和上线，9 月 9 日继续修门窗、加留言，9 月 11 日又摆进了六盆植物。这篇文章把这几轮过程放在一起，记下哪些地方搭得快，哪些地方看似很小，却来回改了好几遍。

配图来自项目后续完善版本的真实渲染画面。房屋按参考图和照片还原，部分尺寸经过估算，适合看空间和体验交互，不能代替施工图。

先搭出能检查的空间

最开始，先处理的是客餐厅、卧室、书房、厨房、两个卫生间和阳台的位置关系，把墙体、门洞、窗和地面搭出来。这个骨架如果错了，后面家具做得再细，也会在某个转角露馅。

项目保留了一套从户型图坐标换算到三维空间的规则：图上的横向位置对应场景的 X 轴，纵向位置对应 Z 轴，竖直方向用来表示高度。房间定位、门洞和家具都使用同一套参照，避免每做一个柜子就重新猜一次位置。

有尺寸的地方按已知信息来，没有尺寸的地方就结合门、床、台面等物体估算比例，并记下这是估算值。比如层高先设为 2.8 米，家具宽度、柜体厚度和灯具大小再随照片逐步修正。我没有把这一版模型当作精确测绘结果。

书房就是一个很早出现的修正。平面图里它原本被当成卧室，但实际用途是书房，里面是一张 2 米 × 0.7 米的升降桌。把示意床删掉，只是第一步；桌子朝哪面墙、椅子后面留多少空间、书柜和窗有什么关系，都得重新看。

这也决定了我后来给 AI 的反馈方式：先说明房间实际怎么使用，再去描述物体外观。只说“这里放张桌子”，能得到一张桌子；把尺寸、朝向、位置和周围物体一起说清楚，才能得到自己的书房。

让页面既能逛，也能帮我找问题

网页使用 React、TypeScript 和 Three.js。React 负责房间导航、视图设置和留言等界面，Three.js 负责模型、材质、灯光和相机。模型也按房间与家具拆开，餐边柜、厨卫、灯具、宠物各有自己的文件，后面改某个局部时容易定位。

浏览方式分成整体视角和室内视角。整体视角可以旋转、平移和缩放，适合检查房间关系；进入室内后，用拖动环视、WASD 移动和方向键转向，能更接近日常站在房间里的观察角度。房间快捷导航则省掉了从客厅一路挪到卫生间的过程。

第一次打开的话，我建议先俯视看布局，再选一个房间进入室内，最后切到夜景看灯光。先有空间方位，再看局部，会比直接放大某件家具容易理解得多。

白模、线框、墙体剖切和家具显示开关也派上了用场。关掉材质以后，墙和柜子的连接更清楚；降低剖切高度，平时被遮住的背板和门洞会露出来。它们既是浏览方式，也是我检查模型的工具。

相机本身也要调。同样从房间中心看出去，厨房和卫生间很容易只看到一面墙。后来把这些房间的默认室内视角放到入口附近，朝向尽端窗，再分别调整视野，打开房间时才有一个能看清布局的起点。

最费时间的是「看着像，但位置不对」

第一版能辨认出家的大致布局，但真正开始对照照片，差别就冒出来了。很多东西单独看都合理，放到一起却不是原来的关系：柜子朝反了，层板位置错了，隔壁房间还能看到背板后面的缝。

餐边柜是比较典型的一次重建。照片里有奶油白吊柜和高柜、深木色下柜、花纹石材背板、悬空层板，还有上下灯带、黑色轨道插座和壁挂饮水机。把它们理解成“一组白色柜子”，能很快搭出轮廓，却会丢掉最容易认出来的细节。

我后来把反馈拆得更具体：吊柜和下柜之间是什么材质，层板从哪里伸出来，灯带照哪一块面，插座和饮水机分别在哪边。模型里也把餐边柜单独组织起来，调整台面、背板或灯带时，不必翻动整个房屋的代码。

主卧的难点更偏向空间关系。黑框玻璃屏风、梳妆台、转角衣柜和玻璃展示柜要连成一个组合。飘窗右侧的开放格尤其容易理解错：它位于墙凹位里，开口朝向飘窗内侧，和窗面垂直。只补一句“飘窗旁边有书架”，几乎没有交代最关键的信息。

客厅也按新照片重新调整过。电视柜移除后保留壁挂电视，沙发改成外露木框和黑色软包，茶几改为深木色薄桌面，地毯补上黑色包边。厨卫则结合不同角度的实拍，分别核对台盆、马桶、水槽、柜体与淋浴隔断，避免把相似的两间卫生间混在一起。

颜色也不能只凭一张照片里的像素下结论。现场灯光、反光和拍摄曝光都会改变地砖、木地板的颜色。放进场景后，还得在日光和夜景里一起观察，调整材质的粗糙度和反光，才能接近照片给人的整体感觉。

门能动以后，静态截图就不够了

有些问题在正面截图里完全看不出来。地板、顶面或装饰板如果有重叠表面，镜头一转就会闪；柜子正面封住了，绕到侧面却能看见隔壁房间；门关着很正常，打开到一半开始穿墙。

门扇需要一起核对门轴、把手、旋转方向和活动范围。9 月 9 日这一轮里，卧室门调整为向内开，入户门向外开；主卧后来又明确成从门外看右侧合页、左侧把手。不能只把旋转角度换个正负号就算完成。

入户门当时按 0° 到 90°、每隔 2.5° 检查一次，共覆盖 37 个开门角度，看的是从关闭到打开的整个过程。除了门板是否碰墙，还要确认门洞附近没有重复墙面，否则门不穿墙了，画面仍然会闪。厨房推拉门和阳台推拉门也需要按各自的结构处理。

柜体连接处则出现过另一类问题：次卧衣柜和餐边柜背板之间没有完全封住，从特定剖切角度还能看到床。后来补了到顶封板，再从正面、侧面和剖切视角一起检查，才把这个缝隙处理完整。

这一轮让我开始把验收写成具体动作：旋转一圈、拉近看接缝、开门到中间角度、降低墙体剖切高度。几何检查能帮忙发现重叠和越界，浏览器里实际转动场景，则能发现那些数据上合理、视觉上仍然别扭的地方。

灯亮起来，家具才有层次

最初直觉上会觉得，给灯具一个发光材质，夜景就有了。实际做起来还得分别处理灯罩自身的亮度、周围物体受到的照明，以及整个画面的曝光。灯具看上去亮了，台面和背板不一定就被照清楚了。

餐边柜灯带需要让背板和台面产生明暗变化；客餐厅吊灯既要有照明，也要保留灯臂和灯罩的形状；主卧水滴吊灯、玻璃展示柜的层板与柜内灯带，则要在同一画面里保持不同的层次。

调灯时我会来回看几个固定位置：餐边柜的背板有没有被照到，玻璃柜里面还能不能看见层板，木地板有没有被曝光冲成白色。一个角度舒服，不代表全屋都合适。白天和夜晚要分别检查，不能用一个很亮的光源把所有问题盖过去。

后面加了灯光跟随系统主题：系统进入深色时，房间切到暖光夜景；回到浅色时恢复日光。手动切换后会暂时停止跟随，也可以在设置里恢复。这样晚上再打开网页，看到的家和白天会有一点不同。

餐边柜的小爱音响还做了一个很小的点击互动，点击后播放“你好，我是小爱同学”。它只是页面里的问候音频，并没有接入真实家里的智能设备，但放在熟悉的位置上，会让这块空间多一点生活感。

噜噜不能只是贴在地板上的一张图

把猫放进去以后，项目突然有了很明确的主角。我希望能认出这是噜噜，所以保留了照片参考的透明动画素材。它的脸、体型和毛色，比换成一只动作更方便的通用三维猫更重要。

不过，透明背景不等于放进场景就自然。素材四周有留白，不同动作帧的脚底也不在同一个位置。如果直接把图片中心放在地面上，有的动作会陷进地板，有的又像悬在半空。镜头低一点，这个问题尤其明显。

后来调整的重点是统一脚底基准，按照地板、地毯的实际高度放置，再让接触阴影跟住脚下。站立、行走、停下和侧躺都要分别检查，不能只修好一张静止帧。俯视检查位置，低角度检查有没有离地，两种视角缺一不可。

路线也会影响观感。猫需要绕开墙和家具，转弯时逐渐改变朝向，移动方向要跟身体方向一致。否则即使每个动作单看没问题，连起来仍然像在地面上滑动，或沿着格子突然拐直角。

交互上，单击让它撒娇，双击让它跑开，也安排它回阳台休息。我没有继续堆很多花哨动作，而是先把这些常见状态之间的衔接调顺：停下后不要突然换方向，起步时别瞬间弹起来，转身时别露出明显的漂浮感。

照片精灵仍然有观察角度上的限制，它并不是一只完整的三维动物。这个取舍我可以接受：我更想在网页里看见噜噜，而不是为了一套更复杂的技术方案，把它换成另一只猫。

上线之后，开始处理模型之外的事

房子能看、能动以后，我把网页部署到 Netlify，再用独立域名作为入口。场景继续由浏览器渲染，留言和访问统计交给 Netlify Functions 与 Blobs，数据存储与静态文件发布分开，重新构建页面不会顺带清空记录。

访问统计区分浏览次数和浏览器访客。同一浏览器重新打开或刷新会增加浏览次数，访客标识用于避免每次都算成新人；请求重试也复用同一事件标识，减少重复累计。它仍然只是浏览器层面的参考，换设备或清除数据都可能产生新访客，不能把它当作精确人数。

9 月 9 日加上了不用注册账号的留言。留言入口可以拖动和收起，默认先看列表，要写留言或回复时再打开编辑浮层，尽量少挡住房间。填写的邮箱不在公开内容里展示，同一邮箱会对应固定头像。

回复和邮件提醒是后来继续补的。最初的留言没有保存可用于通知的邮箱，因此旧留言只能站内回复；后续留言选择邮件提醒后，才会在屋主回复时收到通知。这个小插曲也提醒了我：一开始只想着“能发出来”，往往会漏掉“发完以后怎么继续交流”。

到 9 月 11 日，又根据新照片摆进了六盆植物：餐边柜和主卧梳妆台各放一盆，另外四盆放在书房窗边，高低错开，也留出台面的使用空间。这次修改很小，却很符合我对这个项目的期待——家里有了新变化，网页里的家也可以跟着更新。

这次做下来，我会保留的几个做法

第一，参考资料要带着位置关系看。同一个房间的多张照片应该放在一起理解，明确哪面墙、哪个方向、和谁相邻。AI 能根据描述补出很多合理细节，但这些“合理”未必就是自己家的实际情况。

第二，把反馈写成能检查的要求。“更真实一点”太宽泛；“开放格开口朝飘窗内侧”“右侧合页、左侧把手”“灯带照到背板”“猫脚底贴住地面”，下一轮就能直接检查有没有改对。

第三，先把比例、位置和动作修好，再增加装饰。门会穿墙、柜体有洞、猫在悬空的时候，加再多摆件也很难让空间可信。回头看，这些基础关系比第一眼的精细程度更影响体验。

现在这版依然有边界：部分尺寸是估算，材质受参考照片光照影响，室内漫游也是没有碰撞的自由相机。页面支持导出 PNG 和 GLB，但网页里的墙体剖切只是查看方式，不会直接变成导出模型里的截断墙体。

对我来说，它已经足够承载这次折腾的乐趣：给朋友发一个链接，能看到家里大概是什么样，切到夜景，转到阳台，再碰一碰噜噜。以后家具换了位置、台面多了一盆花，我也有理由再回来，把这个网页继续补一点。