浏览器里的住宅
一个用来练习 Web 端 3D 的交互式模型。

概览
业余时间的个人项目:一个可以直接在浏览器中漫游的住宅模型。建筑几何、室内与花园都来自同一个数据模型。题材是我正在建的住宅,但项目的重点是我在其中学到的东西。
工作范围
- 浏览器中的交互式 3D 模型
- 几何结构与尺寸的数据模型
- 室内、碰撞检测与空间漫游
- Blender 效果图
01 /背景
这个项目最初只是一次练习。我想知道浏览器里的 3D 场景究竟能承载多少内容,为此需要一个自己熟悉的题材——我同时也在推进的这栋住宅。
它既不是客户项目,也不是产品,而是一个没有客户、没有截止日期的试验场。正因如此,我在其中学到的东西最多。
02 /我的角色与责任
模型和整个 Web 场景都由我独立开发:几何结构、材质、相机控制、室内漫游,以及场景仍能合理加载的数据体积。
题材是我正在建的住宅,因此我使用真实尺寸。模型又会反过来影响设计,帮助我理解空间以及各个部分之间的关系。
03 /关键决策
可以亲自漫游的空间
模型可以旋转、飞行浏览,也可以走进室内。它包含室内空间、可开关的门和碰撞检测,让我从行走者的视角体验空间。
统一的数据模型
几何结构、尺寸和技术视图都来自同一份数据。一处修改会贯穿整个场景,不需要再手动逐个查找。
没有截止日期的练习场
这个项目刻意没有客户和期限。我可以在这里尝试那些在付费工作中会更谨慎采用的做法,只把验证过的经验带到别处。
04 /架构
我使用 TypeScript 和 Babylon.js 开发交互模型。几何结构、尺寸和技术视图都来自同一个数据模型。
Web 场景与 Blender、Cycles 相衔接,用于制作效果图。准备好的 3D 模型与材质再回到浏览器中,同时保留旋转、飞行浏览和室内行走功能。
05 /技术
Babylon.js, TypeScript, React, Blender, Cycles, glTF
06 /成果
模型可以直接在浏览器中漫游:旋转、飞行浏览,以及在室内和花园中行走。链接始终指向当前已发布的版本。
我仍在继续完善它。在这里学到的 Web 端 3D、性能优化和数据处理经验,也会用在这个项目之外。
