“你以为是在看建筑平面图，其实眼前已经是一个 3D 场景。” @SammmAing 的这个 3D 建筑漫游 Demo，最吸引我的，是它把同一个空间从平面图自… · @yanchuanlab · TwKit

@yanchuanlab

“你以为是在看建筑平面图，其实眼前已经是一个 3D 场景。” @SammmAing 的这个 3D 建筑漫游 Demo，最吸引我的，是它把同一个空间从平面图自然过渡到了室内视角。 第一眼看上去，很像某种把 2D 户型图变成 3D 房间的技术。但看过实现逻辑就会发现，作者做了一个很聪明的视觉魔术：房子本来就在那里，只是换了一种方式让你看见。 💡 这个视觉魔术是怎么实现的？ 1. 藏在顶上的“隐形拉闸门” 开场的“平面图”，其实是 3D 场景。 你可以把它理解为：作者在房子大约 1.2 米高的位置设了一道“隐形拉闸门”，技术上叫剖切面，让高于它的部分暂时不显示。 再用接近垂直的俯视角度和长焦效果，把空间呈现得像一张建筑图纸。 当你滚动页面，剖切面逐渐升高、墙体显现，镜头随之下降，再进入房间。 2. 建筑和家具，全靠代码“搭积木” 作者明确说，这个项目没有使用 Blender。 墙壁、地板和家具等几何结构，都是用 JavaScript / Three.js 代码生成的，不需要下载外部建筑模型文件。 不过，代码建模也有资源负担。为了呈现真实质感，它使用了 Poly Haven 的 CC0 扫描材质，电脑端约需加载 39 MB 纹理，手机端约 13 MB，再配合实时光照、阴影和后期处理。 遇到加载过慢、设备不支持或渲染失败时，页面会提供静态图和可播放的视频作为替代。项目仍在开发中，作者建议优先用笔记本电脑体验。 3. 像沿着轨道参观一样的“滚动漫游” 镜头的参观路线已经提前设计好了。 滚动页面，就相当于控制镜头沿着这条路线前进。随着参观进度推进，各个房间逐步从线稿显现出真实材质。 部分展示节点还提供可点击打开的介绍卡片，补充空间尺寸、材料和设计细节。 这个设计巧妙的地方在于：先让你看懂整体布局，再带你走进去感受空间。 🚀 这种设计未来能用来做什么？ 下面是值得探索的应用方向，并非这个 Demo 已经实现的功能： • 智能家居展示：沿着路线进入房间，再加入家具方案切换，让用户比较不同效果。 • 高单价产品展示：借鉴剖切与连续运镜，把复杂电子产品或机械的内部结构逐层展示出来。 • AI + 3D 空间创作：探索将草图识别、模型生成与网页漫游结合，让用户更容易创建可以参观的小空间；具体效果仍需要开发和验证。 🌐 代码与体验 • Demo 体验 (https://sam1983aing.github.io/casa-serra/) • 原作者 GitHub (https://github.com/Sam1983Aing/casa-serra) #Threejs #WebGL #FrontEnd #UIUX #交互设计 https://x.com/SammmAing/status/2109708195031900310/video/1

曝光 56 · 评论 0 · 点赞 4 · 书签 2