Atelier Volume — 交互式 3D 配置器

项目起点

Atelier Volume 是我设计并开发的一款网页应用，目的是让任何人都能看懂一个建筑改造方案。演示基于一栋真实存在的住宅楼模型：几何形状原样保留，只删除了身份信息和项目文件的元数据。

要解决的问题

围绕一栋建筑的沟通，往往依靠图纸、标注过的照片和冗长的消息，每个人对同一个想法的理解都不一样。即便有 3D 模型，它也只存在于专业软件里，只有专业人士会用。缺少的是一个简单的工具：能看到建筑本身，在上面试一试修改，再把结果清楚无误地传达给别人。

我的方案

我把建筑模型变成了一个交互式工具，无需安装，电脑和手机上都能用。你可以旋转建筑、选中一个构件并修改它，然后通过一个链接或一份可打印的报告分享你的版本。

• 485 个建筑构件可选中、可编辑：窗户、阳台、屋顶……
• 每个构件都能移动、旋转、调整尺寸和颜色，用鼠标或在侧边面板中操作
• 添加体块和示意性设备，用来试验一个想法
• 为方案添加备注，支持撤销与重做，方便比较不同尝试
• 在浏览器中本地保存，并通过链接分享当前快照
• 导入导出 JSON，导出 3D 模型（GLB）和当前视图的图片
• 可打印为 PDF 的报告，界面同时适配电脑和手机

演示截图

试用演示 ↗︎

技术内幕

建筑直接在浏览器中由 Three.js 显示和编辑；应用用 JavaScript 编写、用 Vite 打包，无需账号也无需安装即可打开。Python 脚本负责准备公开发布的模型：去除项目文件的元数据，而不改动几何形状。我借助 Higgsfield 3D Jutsu 处理材质和渲染——通用的抹灰墙面、屋瓦和窗户纹理，以及重新调整的光照——让模型一眼就能看懂。网站部署在 Vercel 上。

值得一提的难点

在不牺牲可编辑性的前提下让模型更逼真：纹理和光照必须在不改变几何形状、也不破坏 485 个构件选择功能的情况下加入。比如，一个由多种材质组成的屋顶，必须仍然是一个可以一次拖动的构件。每一步我都会检查：导出的模型在 3D 软件中重新打开后，所有构件都还在原来的位置。

我的角色

我从头到尾负责整个项目：梳理需求、设计界面、开发应用和 3D 编辑器、准备模型、处理材质与光照、在电脑和手机上测试，最后上线。

项目进展

演示已经上线，所有人都可以使用。其中的尺寸和位置仅供参考：这个工具用于直观展示和讨论想法，不能替代实地测量或技术研究，渲染效果也不代表测量精度。编辑以构件为单位；对构件形状的精细调整，可以在导出后用 3D 软件继续完成。

用在你的项目上

同样的思路也适用于其他行业和其他对象：只需要一个 3D 模型，再明确用户需要完成哪些操作。我可以为你打造：

• 3D 配置器：下单前先选择并直观查看不同选项
• 可视化模拟工具：动手之前先试验一项修改
• 交互式项目展示：通过一个链接即可分享
• 贴合你所在行业的交互式报告，可打印为 PDF

几个数字

项目所用工具

3D 显示与编辑

Three.js、JavaScript

网页应用

Vite，适配电脑和手机的界面

模型准备

Python

材质与渲染

Higgsfield 3D Jutsu

上线部署

Vercel