浏览器里的住宅

一个用来练习 Web 端 3D 的交互式模型。

个人项目 · 交互式 3D 网页

在浏览器中漫游模型
由 3D 模型渲染的效果图:从花园望向两个相连的建筑翼和露台

概览

业余时间的个人项目:一个可以直接在浏览器中漫游的住宅模型。建筑几何、室内与花园都来自同一个数据模型。题材是我正在建的住宅,但项目的重点是我在其中学到的东西。

我的职责
交互式 3D 模型开发
团队
业余时间的个人项目
平台
交互式 3D 网页
状态
正在建设与开发

工作范围

  • 浏览器中的交互式 3D 模型
  • 几何结构与尺寸的数据模型
  • 室内、碰撞检测与空间漫游
  • Blender 效果图

01 /背景

这个项目最初只是一次练习。我想知道浏览器里的 3D 场景究竟能承载多少内容,为此需要一个自己熟悉的题材——我同时也在推进的这栋住宅。

它既不是客户项目,也不是产品,而是一个没有客户、没有截止日期的试验场。正因如此,我在其中学到的东西最多。

02 /我的角色与责任

模型和整个 Web 场景都由我独立开发:几何结构、材质、相机控制、室内漫游,以及场景仍能合理加载的数据体积。

题材是我正在建的住宅,因此我使用真实尺寸。模型又会反过来影响设计,帮助我理解空间以及各个部分之间的关系。

03 /关键决策

  1. 01

    可以亲自漫游的空间

    模型可以旋转、飞行浏览,也可以走进室内。它包含室内空间、可开关的门和碰撞检测,让我从行走者的视角体验空间。

  2. 02

    统一的数据模型

    几何结构、尺寸和技术视图都来自同一份数据。一处修改会贯穿整个场景,不需要再手动逐个查找。

  3. 03

    没有截止日期的练习场

    这个项目刻意没有客户和期限。我可以在这里尝试那些在付费工作中会更谨慎采用的做法,只把验证过的经验带到别处。

04 /架构

我使用 TypeScript 和 Babylon.js 开发交互模型。几何结构、尺寸和技术视图都来自同一个数据模型。

Web 场景与 Blender、Cycles 相衔接,用于制作效果图。准备好的 3D 模型与材质再回到浏览器中,同时保留旋转、飞行浏览和室内行走功能。

05 /技术

Babylon.js, TypeScript, React, Blender, Cycles, glTF

06 /成果

模型可以直接在浏览器中漫游:旋转、飞行浏览,以及在室内和花园中行走。链接始终指向当前已发布的版本。

我仍在继续完善它。在这里学到的 Web 端 3D、性能优化和数据处理经验,也会用在这个项目之外。