用 iPhone 扫一间房,AI 帮你在浏览器里 1:1 重建它:Wes Bos 的 scan-to-threejs 工作流

数据说明:本文 Star/Fork 数字取自 2026 年 11 月 12 日 GitHub API 实测快照;工作流、命令与许可信息均以 wesbos/3d-model-anything 仓库 README 原文为准,未作虚构。

"把我的房间搬进 3D 世界"听起来像 Apple 发布会的产品承诺,但 wesbos/3d-model-anything 给出了一条开发者今天就能走的路:用带 LiDAR 的 iPhone 扫描房间,把几何与照片交给 AI 编码代理,迭代式地重建出一个可在浏览器里漫游的 Three.js 场景。这是知名前端教育者 Wes Bos 的实验项目------写过无数 JavaScript 教程的那位 Wes Bos------10 月 21 日创建,22 天 Star 达 2,968(Fork 445),仓库里包含 iPhone 采集应用、Three.js 查看器、scan-to-threejs 技能文件和他自己办公室的完整重建示例。

为什么选"房间"这个场景?因为它是现实与数字世界之间难度适中的桥梁:物体都是刚体、几何以平面为主,LiDAR 在室内的测距精度也最好------比人脸和复杂曲面容易重建,又比单个物体更能展示"空间"的完整信息。这个场景选择本身就带着工程判断。

一、项目概览:四件套与一句诚实的定位

指标 数值(2026-11-12 快照)
Star / Fork 2,968 / 445
创建日期 2026-10-21(22 天,日均约 135)
组成 iPhone 采集应用 + Three.js 查看器 + agent 技能文件 + 办公室示例
采集设备 需带 LiDAR 的 iPhone/iPad(非 LiDAR 设备可导入查看扫描)
许可 复用代码与技能 MIT;示例图片纹理另有单独资产条款

README 里有句话决定了理解这个项目的方向:"This is an iterative reconstruction workflow, not a one-click scan-to-perfect-model converter"------它明确拒绝"一键扫描出完美模型"的承诺,而是把重建拆成"应用记录证据、技能引导代理测量建模、渲染视图与原照片比对"的循环。作者坦率地说当前工作流聚焦于房间与室内场景。这种不做过度承诺的姿态,在蹭 AI 热点的项目里相当少见。

二、工作流拆解:取证、测量、建模、对拍

整个流程分四步,每一步都有明确的职责边界:

第一步,取证 :iPhone 应用采集房间的几何(LiDAR 深度)与照片,通过系统分享面板导出,放进仓库的 data/captures-in/<room>/ 目录。导出格式遵循 house-capture/5 契约------采集端和重建端靠这个固定契约解耦,应用改名不影响数据;没有 LiDAR 的设备也能导入别人导出的扫描做查看与复核。README 特意提醒:应用是 source-available 形式,需自行用 Xcode 构建,别假设 App Store 上有下载。

第二步,召唤代理 :在支持本地技能的编码代理里打开仓库,让它使用 scan-to-threejs 技能。技能文件位于 .agents/skills/scan-to-threejs/SKILL.md,也可以把整个技能目录复制进你自己的代理技能目录(配套的查看器/运行时仍需保留,采集流程依赖它)。README 给的示例请求是这样的:

text 复制代码
Use scan-to-threejs to rebuild the room in data/captures-in/my-room.
Inspect the measurements and photos, create an editable scene, and
compare rendered views with the original photographs.

第三步,测量与建模 :技能文件(.agents/skills/scan-to-threejs/SKILL.md)引导代理读测量数据和照片、创建可编辑场景;入门从两份参考文档开始------格式指南(references/house-capture.md,讲清导出数据每个字段是什么)与项目布局说明(references/project-layout.md)。辅助脚本需要 Python 3,照片比对需要 Pillow,可选的深度重建需要 NumPy 与 Open3D,采集脚本走 agent-browser CLI------技术栈全部是现成的开源件,没有需要付费依赖的环节。

第四步,对拍验收 :这是整个工作流的灵魂------matched-camera 视觉比对:代理把渲染出的视图与原始照片在同一机位下对照,自己发现"墙的颜色不对、窗子位置偏了"这类偏差再迭代。重建不是"生成然后祈祷",而是有原照片这个 ground truth 兜底的闭环。

三、查看器:五种视角检查你的数字分身

仓库同时提供了重建结果的浏览端,Node 22.12+ 环境三条命令就能跑起来:

sh 复制代码
npm ci
npm run dev   # 打开 http://localhost:5188

支持娃娃屋(dollhouse)、行走、俯视、线框、knolling 五种视图------最后这个 knolling(物件平铺)视图尤其有趣,它把场景里的所有物体按类别拆开平铺陈列,等于给房间做了次"解剖",检查建模覆盖率一目了然。调试页在 /play.html?room=office-v4&mode=fpv。Wes 自己的办公室示例保留了 office-v2、office-latest、office-v4 多个重建层------等于把迭代历史也开源了,你可以对比每一版重建的几何差异,看代理是怎么一步步逼近真实的。新增房间放进 demos/<id>/ 并在 demos/index.ts 注册即可。还要注意隐私细节:官方示例只分发了重建结果与部分纹理,原始扫描与照片集不在分发范围内,demo 里 Scan 与 Overlay 两个依赖参考资产的模式也是禁用的------这两者对你自己的房间依然可用。

四、给开发者的可操作建议

  1. 试用的现实门槛 :扫描端必须是带 LiDAR 的 iPhone/iPad(Pro 系列与部分机型),应用以 source-available 形式在仓库内发布、需自行用 Xcode 构建,不要假设 App Store 有下载;查看器无门槛,先跑官方办公室 demo 感受再决定投入。
  2. matched-camera 比对范式值得抄走:让 AI 用"原始照片"校准"自己的产出",比对失败就迭代------这个模式适用于一切"从现实或参考物重建数字产物"的任务(复刻 UI、还原图表、重建页面),比"生成后人工挑错"效率高一个量级。
  3. 注意项目状态 :仓库最后一次推送停在 10 月 27 日,之后近半月无更新------它更像一份完成度很高的工作流示范而非持续维护的产品;许可也做了切分,代码与技能是 MIT,但示例里的图片纹理有独立资产条款(ASSETS-LICENSE.md),发布自己的 demo 前先检查资产,自己的扫描数据则按 README 建议保持私密:只保留重建结果、不分发原始扫描包,发布前逐一检查资产里是否带入了私人信息。
  4. 采集端是可以自己扩展的 :iPhone 应用 + house-capture/5 契约的设计意味着你可以把采集源换成其他 LiDAR 工具(甚至不用 LiDAR,手工输入尺寸),只要导出符合契约的目录结构,重建流水线照常运转。

五、结语

这个项目的星数(2,968)在动辄上万的 AI 热榜里不算扎眼,但它展示的思路相当扎实:把"现实→数字孪生"这个大问题,拆成采集契约、技能文件、视觉比对三层,让 AI 在每一层都有明确的输入输出和验收标准。这与我们之前介绍过的"技能文件引导安装"、"截图验证发布"是同一个思想的不同应用------AI 时代的工程效率,不来自把任务整个扔给模型,而来自把任务切成模型可自检的小循环。iPhone 的 LiDAR 硬件已经铺开多年,苹果自己也在持续推房间级的空间 API,缺的从来不是采集能力,而是一条把原始数据变成可用产物的流水线------scan-to-threejs 恰好把这条流水线的每一段都摊开给了你看。如果你有一台带 LiDAR 的 iPhone 和一个想搬进浏览器的房间,这个周末就可以试试。本文数据为 2026-11-12 快照,以仓库最新 README 为准。

相关推荐
锋行天下44 分钟前
LangGraph HITL 实战:从 interrupt 到 useStream 的最小闭环
人工智能
kyriewen1 小时前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
张彦峰ZYF2 小时前
浏览器调试接口的官方化:从 chrome-devtools-mcp 看 Agent 原生工具层的形成
人工智能·chrome·agent·mcp·apache-2.0许可·devtools-mcp·调试闭环
Dawson Zhu2 小时前
Queen Planner深度解析:Agent竞争从模型时代进入系统时代
人工智能·语言模型·架构·aigc·agi
甲维斯2 小时前
GPT6.2Astra也很强啊,国模...!
人工智能
承渊政道3 小时前
Fooocus本地AI绘图教程:Windows部署、低门槛生图与远程访问
人工智能·windows·cpolar·fooocus·生图
熊猫钓鱼>_>3 小时前
普通用户视角的端侧智能体验手记【鸿蒙心迹】
开发语言·人工智能·华为·智能手机·性能优化·ai编程·harmonyos
AI算力3 小时前
私有云时代来临:AI NAS如何重塑你的数字生活?
人工智能·科技·ai·生活·nas·ai算力·ainas
程序员cxuan3 小时前
讲真,智能路由这事儿,还得看基元律动
人工智能·后端·程序员