wy51ai/floorplan-3d

选用指南

AI 根据 README 整理 · 2026/10/14 13:22:02

使用方式

通过浏览器直接打开index.html即可使用，也可启动本地静态服务器访问。

查看 README 依据

- 为每个房间更换地面材料（木地板、地砖、大理石、水磨石、地毯等），按面积加 5% 损耗估算造价 - 撤销 / 重做，方案自动保存在浏览器本地 - 中文 / English 界面切换（顶栏右侧按钮，默认中文，选择会记住） - 导出 PNG 图片，导出 / 导入方案 JSON ## 快速开始 ```bash git clone <仓库地址> cd <仓库目录> ``` 然后直接用浏览器打开 `index.html`。也可以起一个本地静态服务器： ```bash python3 -m http.server 8000 # 访问 http://localhost:8000 ``` > Three.js 通过 jsDelivr CDN 加载，首次打开 3D 场景需要联网。 ## 快捷键 | 按键 | 作用 | | --- | --- | | `T` | 切换 2D / 3D | | `V` / `M` / `X` | 选择 / 测量 / 拆改墙体 | | `R` / `Shift+R` | 选中家具顺时针 / 逆时针旋转 90° | | `Delete` / `Backspace` | 删除选中家具 | | `Ctrl/⌘ + D` | 复制选中家具 | | `Ctrl/⌘ + Z`，`Ctrl/⌘ + Shift + Z` | 撤销，重做 | | `F` | 适应窗口 |

部署要求

首次打开3D场景需要联网，因为Three.js通过CDN加载。

查看 README 依据

- 为每个房间更换地面材料（木地板、地砖、大理石、水磨石、地毯等），按面积加 5% 损耗估算造价 - 撤销 / 重做，方案自动保存在浏览器本地 - 中文 / English 界面切换（顶栏右侧按钮，默认中文，选择会记住） - 导出 PNG 图片，导出 / 导入方案 JSON ## 快速开始 ```bash git clone <仓库地址> cd <仓库目录> ``` 然后直接用浏览器打开 `index.html`。也可以起一个本地静态服务器： ```bash python3 -m http.server 8000 # 访问 http://localhost:8000 ``` > Three.js 通过 jsDelivr CDN 加载，首次打开 3D 场景需要联网。 ## 快捷键 | 按键 | 作用 | | --- | --- | | `T` | 切换 2D / 3D | | `V` / `M` / `X` | 选择 / 测量 / 拆改墙体 | | `R` / `Shift+R` | 选中家具顺时针 / 逆时针旋转 90° | | `Delete` / `Backspace` | 删除选中家具 | | `Ctrl/⌘ + D` | 复制选中家具 | | `Ctrl/⌘ + Z`，`Ctrl/⌘ + Shift + Z` | 撤销，重做 | | `F` | 适应窗口 |

已知限制

户型数据写在index.html中，需要修改代码才能更换户型。

查看 README 依据

| `+` / `-` | 放大 / 缩小 | | `[` / `]` | 展开 / 收起左侧家具库、右侧面板 | | `Shift + F` | 全屏 | | `Esc` | 取消当前操作 | | 漫游：`WASD` / 方向键，`Shift`，`E` | 移动，快走，开关门 | ## 技术栈 - 原生 HTML / CSS / JavaScript，无框架、无构建步骤 - 2D 平面图用 SVG 绘制 - 3D 场景用 [Three.js](https://threejs.org/) r160（OrbitControls、PointerLockControls、RoundedBoxGeometry、RoomEnvironment、CSS2DRenderer） - 数据保存在 `localStorage` ## 自定义户型 户型数据写在 `index.html` 里： - `ROOMS`：房间多边形、名称、默认地面材料 - `WALLS` / `WINS`：墙体与窗洞 - `MATS`：地面材料名称与单价 - `LIB`：家具库（类型、名称、默认尺寸、颜色） - `buildFurniture()`：各类家具的 3D 模型 改这些数据就能换成自己的户型。 ## 社交媒体 - X（Twitter）：[@akokoi1](https://x.com/akokoi1)