那面会自己长出来的墙，其实是 1.2 米高处的一刀

打开页面，是一张平面图。黑线、房间名、尺寸标注，像建筑师打印出来的图纸。往下滚，墙从纸里立起来，镜头压低到门的高度，一间一间走进去。每间房在镜头到达之前都是线稿，到了才铺上材质。

这是 Samnang Aing 做的 Casa Serra，一栋 946 平米的庭院住宅，设定在辛特拉的山丘上。Meng To 转发时说，这是把建筑、网页设计和 3D 混在一起的新路子，Opus 5.5 配 three.js 有点猛。

原作者自己在推上写，这个 demo 在 Threads 和 LinkedIn 上一夜合起来 60K 浏览，他说这种事从没发生在他身上。

平面图不是图片

最容易看错的地方就在这。那张「图纸」不是一张图，它就是真实的 3D 模型，在 1.2 米高处被切开，从正上方用一根很长的镜头往下看。滚动让切面上移，墙就跟着长出来。图纸和建筑是同一个东西，两套资产都没有。

所有几何体都是代码里生成的，没有用 Blender。纹理是 Poly Haven 的 CC0 扫描件，笔记本上大概 39MB，手机上 13MB。技术栈是 three.js、GSAP ScrollTrigger 和 Lenis，纯文件，没有构建步骤。跑不动的设备上，你会看到一张静帧加一段漫游视频。

这个做法值得记一下：视觉上像 2D，底层是 3D，中间只隔着一个裁剪面和一个正交长焦。省掉的不只是工作量，还有「2D 图」和「3D 模型」之间那道同步的麻烦。

README 里写得很直白：没有单一提示词。整个项目大概 70 条提示词，两周时间，四个完整版本，用 Claude Code 加 Opus 5.5。起点是一段他喜欢的老游戏网站短视频，平面图这个想法是第四天才冒出来的。

仓库里放了一份 starter prompt，作者自己拿一个对新项目一无所知的会话测过：先让它给出建筑布局和相机路径的几个方向，等回答，再分检查点建。第一个检查点只做三件事，图纸、墙升起来、走到第一个房间。大约一小时后拿到结果，跑出来的是另一个 demo，Casa Larga。

那个 prompt 的最后一段，作者说和想法本身一样重要：不给这一段，你会拿到一个自己没选过的完成品。

有人问墙升起的顺序怎么控制，Meng To 的回复是这个 prompt 给的是地基，具体的顺序要自己改。

另一个提到点子上的，是有网友说这种滚动叙事之所以成立，是因为平面图是大家脑子里已经有的模型，每次滚动只加一层，人不会迷路。真正的难点在 reduced motion 的降级方案上，得让不动的那版也讲同一个故事。

还有一条评论挺实在：建筑师拿这个给客户提案，比静态渲染图关单快得多。

仓库自己标了 work in progress，早期阶段，笔记本上体验最好。发布版的脚本是压缩过的。手机端能不能跑，取决于你的设备。

顺着这个思路，评论区有人贴了一个中文的户型编辑器，2D 和 3D 来回切，家具按真实毫米尺寸摆，还能导出方案 JSON。真要做类似的东西，那份家具库和尺寸表比 demo 本身更省事。