### [Floorplan 3D：免费开源的网页户型设计与3D装修布局工具。装修前先在网页里摆家具，还能切换3D视角漫游](https://www.appmiao.com/article/4297)

**Published:** 2026-10-13T02:44:21

**Author:** 阿喵

**Excerpt:** Floorplan 3D 是一款免费开源的网页户型设计工具，支持二维平面布置家具、测量尺寸，并切换到 3D 视…

> Floorplan 3D 是一款开源的网页户型设计工具，可以在二维平面图中布置家具、测量尺寸和调整墙体，再切换到3D视角查看实际空间效果。

## 阿喵前言

沙发、床和餐桌单独看着都不大，搬进家里却可能挡住通道。只看二维户型图，也很难判断家具摆完后会不会显得拥挤。

Floorplan 3D 可以先把家具放进户型中试摆，再进入3D场景走一圈。虽然操作方式不如专业装修软件完整，但用于装修前验证布局已经很方便。

## 资源介绍

Floorplan 3D 是一个纯前端户型装修工具，整个项目只有一个 `index.html`，直接使用浏览器就能打开。

工具内置60多种家具和家电，涵盖卧室、客厅、餐厨、卫浴及书房。家具的位置、角度和尺寸均可调整，还支持贴墙吸附、距离测量及非承重墙拆改。

完成平面布置后，可以切换到鸟瞰、斜视或第一人称漫游模式。二维和三维场景会实时同步，在3D视图中也能直接移动家具。

### 截图

![](https://oss.amiao.app/website/2026/10/13022923/1791858520723-clipboard-1791858520229-piclite-advmo-9fc34193a12d-scaled.webp)

### 特色

-   内置60多种家具和家电
-   支持移动、旋转及修改尺寸
-   提供贴墙吸附和测量工具
-   支持标记及拆改非承重墙
-   一键切换2D与3D视图
-   支持鸟瞰和第一人称漫游
-   自动统计房间及套内面积
-   可更换地面材料并估算费用
-   支持撤销、重做及本地保存
-   可导出PNG图片和方案JSON

### 注意

-   目前不能上传户型图自动生成3D房间
-   自定义户型需要修改 `index.html` 中的房间、墙体和窗户数据
-   修改源码需要具备一点HTML和JavaScript基础
-   家具模型、尺寸和材料费用只能作为布局参考
-   承重墙及实际施工方案应交给专业人员确认
-   方案保存在浏览器本地，清理浏览器数据前记得导出JSON
-   Three.js通过CDN加载，首次进入3D场景需要联网

## 教程

1.  打开 [Floorplan 3D在线版](https://wy51ai.github.io/floorplan-3d/)。
2.  从左侧家具库拖入沙发、床、餐桌等物品。
3.  选中家具，调整位置、方向和具体尺寸。
4.  使用测量工具检查通道和家具间距。
5.  按下 `T` 键切换到3D场景。
6.  在漫游模式中使用 `WASD` 或方向键移动，按 `E` 开关房门。
7.  方案确认后，可以导出PNG图片或JSON文件备份。

如果要换成自己家的户型，需要从[GitHub仓库](https://github.com/wy51ai/floorplan-3d)下载项目，然后修改 `index.html` 中的以下数据：

-   `ROOMS`：房间轮廓、名称和地面材料
-   `WALLS`：墙体位置与尺寸
-   `WINS`：窗户及洞口
-   `MATS`：地面材料和单价
-   `LIB`：家具名称、尺寸和颜色

**Tags:** 3D建模, JavaScript, 免费开源, 在线工具, 开源, 网站

**Categories:** 开源项目, 软件推荐

**Comments:** 

**欧宝:** 这个工具太实用了，正好要装修，先摆一下家具看看效果，省得买回来不合适。



---