🏠 我把「酷家乐式」的 3D 户型图搬进了浏览器（22 件家电逐个能点开菜单，在线直接玩）

在线预览：https://fanhuayishiy.github.io/ai-demo/habitat-interactive-home/dist/

开源地址：https://github.com/fanhuayishiy/ai-demo （MIT，合集仓库，本项目在 habitat-interactive-home/ 目录）

先说这个项目最初的要求是什么：「写一个 3D 家庭模型，类似酷家乐那种三维视图，展示主要软硬装家具家电，能够旋转拖动（自动隐藏遮挡视野的墙体）。灯光家电可以交互，点击开关灯，或者弹出交互菜单。一个房间可能有多个灯。你要有高标准的审美，不能像酷家乐那样简约丑陋。」

提示词里最狠的是最后半句。成品是这样：

能玩什么

• 108㎡ 示例户型，外轮廓 12m × 9m，客厅 / 主卧 / 书房 / 餐厨 / 卫浴 / 阳台六个空间。点左侧房间名，镜头就飞过去聚焦。
• 全屋 22 件可交互设备：11 路灯光 + 11 台家电。每一件都是三维空间里的独立实体，点它弹控制菜单，也可以从右侧设备列表选。
• 灯不是「一间房共用一个开关」。客厅三盏灯——环形吊灯、沙发落地灯、电视氛围灯——各有各的开关、亮度和色温，拖一下滑杆，三维房间是真的在变亮变暗、变暖变冷。
• 家电按类型给不同的控制项：电视画面模式、空调模式与温度、窗帘开合、冰箱温度、烤箱温度、洗衣程序、扫地机器人运行状态、音箱内容。
• 四个一键场景：舒适归家、沉浸观影、一夜好眠、安心离家。它们会批量调整设备，其中冰箱在这些场景里保持运行。
• 环境时段三档：日光、暮色、夜晚，用来看同一套灯光在不同自然光下的样子。
• 「立体视图 / 俯视平面」一键互切，俯视这张直接当户型图看。

几处容易忽略的地方

• 智能隐墙：墙体按观察方向自动淡出，不挡视线；也可以手动切「显示全部」或「隐藏墙体」。
• 设备状态存在浏览器本地，刷新后还在。界面上写清楚了这是本地模拟，功率是演示用的额定参数，不连接也不控制真实家电。
• 按需渲染：静止时停止请求动画帧，操作相机、设备或环境时才唤醒；洗衣机和扫地机器人运行时限帧 30 FPS，页面进后台就暂停，渲染像素比上限 1.5。
• 支持键盘焦点、触摸操作、减少动态效果偏好；WebGL 不可用时给说明，而不是白屏。
• 户型图另有一份可独立打开的 SVG（public/floorplan.svg），页面上点「查看户型图」就能看。

技术栈

React 19 + Three.js 0.180 + TypeScript 5.8 + Vite 6。墙体、门窗、家具、软装、家电全部用程序化几何体搭建，不下载任何外部 3D 模型，不依赖后端、账户或 API 密钥。

本地跑起来

git clone https://github.com/fanhuayishiy/ai-demo.git
cd ai-demo/habitat-interactive-home
npm install
npm run dev          # http://localhost:5173

关于「不能像酷家乐那样简约丑陋」

这句原话我在 README 里逐字留着。合集里每个项目的 README 都固定有一节「主生成提示（原文）」，不改写、不精简，想照着复现的直接看这份：

https://github.com/fanhuayishiy/ai-demo/blob/main/habitat-interactive-home/README.md

关于这个合集

同一个仓库里还有一批 AI 辅助生成的交互式前端作品，全部 MIT 开源、全部带在线预览：日式街角便利店微缩沙盘、波音 787-9 结构数字孪生大屏、热泵洗烘一体机 3D 爆炸拆解、实时 3D 幼儿园、含氢综合能源数字孪生、三坊七巷真实地图导览、体素深夜拉面摊、夕空飞行……

觉得有点意思，可以点个 Star：https://github.com/fanhuayishiy/ai-demo