3D 建筑编辑器 TypeScript

源码资源网

游客，本帖隐藏的内容需要积分高于 20 才可浏览，您当前积分为 0

Stars: 5.3K
语言：TypeScript

项目简介：
一个使用 React Three Fiber 和 WebGPU 构建的 3D 建筑编辑器。采用 Turborepo 单体仓库架构，包含核心状态管理、3D 渲染组件和 Next.js 编辑器应用三个主要模块。支持墙体、楼板、屋顶、区域等建筑元素的创建和编辑，具备 undo/redo 功能和 IndexedDB 持久化存储。

核心功能：
- 节点系统：基于扁平字典的节点层次结构，支持 Site→Building→Level→Wall/Slab/Zone 等建筑元素
- 状态管理：使用 Zustand 管理场景状态，支持 IndexedDB 持久化和 50 步 undo/redo 历史
- 3D 渲染：基于 React Three Fiber 和 Three.js WebGPU 渲染器，支持实时几何生成和更新
- 脏节点机制：智能增量更新系统，只重新计算发生变化的节点几何
- 空间网格管理：提供墙面/地面放置验证、碰撞检测和标高计算功能
- 工具系统：包含选择、墙体绘制、区域创建、物品放置、楼板绘制等专业编辑工具

技术栈：
- 后端：无（纯前端应用）
- 前端：React 19 + Next.js 16 + TypeScript
- 3D 引擎：Three.js (WebGPU 渲染器) + React Three Fiber + Drei
- 状态管理：Zustand + Zundo (undo/redo)
- 几何运算：three-bvh-csg (布尔几何操作)
- 构建工具：Turborepo (单体仓库) + Bun (包管理器)
- 数据验证：Zod
- 存储：IndexedDB

适用场景：
- 建筑设计公司：快速创建和编辑 3D 建筑模型
- 房地产展示：生成楼层平面图和 3D 可视化效果
- 室内设计：布置家具、灯具等室内物品
- 建筑施工：生成施工参考模型和标高数据
- 教育培训：建筑设计和 3D 建模教学工具
- Web3D 开发：学习 React Three Fiber 和 WebGPU 的参考项目