个人开发 筑影编辑器 建筑可视化设计工具

筑影编辑器是一款专业的 3D 建筑可视化设计工具,提供场地规划、建筑建模、室内布置、多楼层管理及高清渲染导出等功能,助力建筑师与设计师高效完成从概念到呈现的全流程工作

下载软件

链接: https://pan.baidu.com/s/1pCZzOamAtvwf5m-ORptW3Q?pwd=5188 提取码: 5188

演示视频:点击观看

https://www.bilibili.com/video/BV13tVN6iES2/?share_source=copy_web\&vd_source=14c4223d5215ca776437be4b6[点击观看](https://www.bilibili.com/video/BV13tVN6iES2/?share_source=copy_web&vd_source=14c4223d5215ca776437be4b66a34514 "点击观看")6a34514

开发记录

python 复制代码
## 2. Monorepo 架构

| 包 | 路径 | 版本 | 职责 |
|---|---|---|---|
| @pascal-app/core | packages/core | 0.8.0 | 场景图、节点 Schema、状态管理、事件总线 --- 纯逻辑,无 Three.js |
| @pascal-app/viewer | packages/viewer | 0.8.0 | 独立 3D 画布:渲染器、系统、表现层状态 |
| @pascal-app/editor | packages/editor | 0.8.0 | 编辑器 UI 组件(侧边栏、面板、工具) |
| @pascal-app/nodes | packages/nodes | 0.1.0 | 节点类型包(柱/墙/楼梯/屋顶等的渲染器和面板) |
| @pascal-app/mcp | packages/mcp | 0.2.0 | MCP 服务器与场景存储适配器 |
| @pascal-app/ifc-converter | packages/ifc-converter | 0.1.0 | IFC 文件转换器(基于 web-ifc) |
| @repo/ui | packages/ui | 0.0.0 | 共享 UI 组件库 |
| editor | apps/editor | 1.0.0 | 独立编辑器应用(Electron + Next.js) |
| ifc-converter-app | apps/ifc-converter | 0.1.0 | IFC 转换器应用 |

包管理器: Bun 1.3.0
构建编排: Turborepo v2.8.x(拓扑排序构建)

## 3. 核心技术栈

### 前端框架
- React 19 (^19.2.4)
- Next.js 16.2.1 --- App Router 架构,output: 'export' 静态导出模式

### 3D 渲染
- Three.js ^0.184.0 --- 核心 3D 引擎
- React Three Fiber ^9.5.0 --- Three.js 的 React 渲染器
- React Three Drei ^10.7.7 --- R3F 辅助组件库
- three-mesh-bvh ^0.9.8 --- BVH 加速射线检测/碰撞
- three-bvh-csg ^0.0.18 --- 基于 BVH 的 CSG 布尔运算
- WebGPU --- Electron 启用 --enable-unsafe-webgpu 和 --enable-vulkan

### 桌面打包
- Electron ^42.2.0
- electron-builder ^26.8.1

### 状态管理
- Zustand v5 --- 多 Store 架构:
  - useScene(场景图,含 zundo 撤销/重做)
  - useViewer(视图表现层状态)
  - useEditor(编辑器状态:工具、模式、绘制等)
  - useAudio、useCommandRegistry、useUpload
- Zundo ^2.3.0 --- Zustand 时间旅行中间件
- Mitt ^3.0.1 --- 事件总线

### UI 组件库
- Radix UI --- 无样式原语组件(Alert Dialog、Context Menu、Dialog、Dropdown Menu、Popover、Select、Separator、Slider、Slot、Switch、Tabs、Tooltip)
- Lucide React ^1.7.0 + @iconify/react ^6.0.2 --- 图标库
- @react-three/uikit-lucide --- 3D 场景内 UI 图标
- cmdk ^1.1.1 --- 命令面板
- @dnd-kit --- 拖拽排序(core + sortable + utilities)
- motion ^12.34.3 --- 动画库(原 Framer Motion)

### 样式方案
- Tailwind CSS ^4.2.1 + @tailwindcss/postcss
- class-variance-authority ^0.7.1 --- 组件变体管理
- clsx ^2.1.1 + tailwind-merge ^3.5.0 --- 类名合并
- tw-animate-css --- Tailwind 动画插件

### 数据验证与 Schema
- Zod ^4.3.5 --- 运行时类型校验(用于节点 Schema 定义和 MCP)

### 音频
- Howler.js ^2.2.4 --- 音效播放

### IFC 支持
- web-ifc ^0.0.77 --- IFC 文件解析(WASM)

### MCP/AI 集成
- @modelcontextprotocol/sdk ^1.29.0 --- Model Context Protocol 服务端

### 其他工具库
- nanoid ^5.1.6 --- 唯一 ID 生成
- idb-keyval ^6.2.2 --- IndexedDB 封装
- dedent ^1.7.1 --- 模板字符串去缩进
- @number-flow/react ^0.5.14 --- 数字动画
- @visual-json/react --- JSON 可视化
- nodemailer ^7.0.0 --- 邮件发送(反馈 API)

## 4. 开发工具链

| 类别 | 工具 | 版本 |
|---|---|---|
| 语言 | TypeScript | 6.0.2 |
| 包管理 | Bun | 1.3.0 |
| 构建编排 | Turborepo | ^2.8.15 |
| 代码质量 | Biome | ^2.4.6(lint + format,替代 ESLint/Prettier) |
| 类型增强 | ultracite | ^7.2.5(增强 TS 错误信息) |
| 渲染分析 | react-scan | ^0.5.3 |
| CSS 编译 | LightningCSS | 1.32.0(平台特定二进制) |
| Tailwind 引擎 | @tailwindcss/oxide | 4.3.0(Rust 加速) |

## 5. 构建配置

- 库包(core/viewer/nodes/mcp/ifc-converter):tsc --build 输出到 dist/
- 应用(editor/ifc-converter):Next.js 构建,Turbopack 开发模式
- Electron 打包:electron-builder,output: 'export' 静态站点嵌入 Electron
- Next.js 别名配置:Turbopack + webpack resolve alias 防止 monorepo 上下文重复

## 6. 分层架构

apps/editor (Next.js + Electron)
  |-- @pascal-app/editor (UI 组件、工具、面板)
  |     |-- @pascal-app/viewer (3D 画布、渲染系统)
  |     |     +-- @pascal-app/core (场景图、Schema、Store)
  |     +-- @pascal-app/core
  |-- @pascal-app/nodes (节点类型渲染器/面板)
  |     |-- @pascal-app/editor
  |     |-- @pascal-app/viewer
  |     +-- @pascal-app/core
  |-- @pascal-app/mcp (MCP 服务)
  |     +-- @pascal-app/core
  +-- @pascal-app/viewer
        +-- @pascal-app/core

严格层级约束:core 不依赖 Three.js/UI;viewer 不依赖编辑器概念;editor 不包含 3D 渲染逻辑。


1.现在选中门时 会弹出一个 横排的图标按钮 三个 移动 复制 删除 ,我现在想增加一个 按钮按R打开关闭门 ,可以再原有位置后面增加 也可以 单独 一个界面
2.选中墙时, 也是会弹出一个 横排的图标按钮 弯曲 复制 删除 ,但是它的位置挡住了 显示 墙尺寸 4.45M和线段,要求往上一点 错开


1.区域 划线时吸附精度 改成 0.05,
2.在建造 地板 天花板 区域 时 画线时可以像建造墙一样 展示 线段之间角度


1.天花板在 架构栏  中点击了 隐藏按钮 但是实际还是显示
2..区域 划线时 可以像 画地板天花版一样 可以在画了3个点 及以上时 按确定键盘创建,而不是现在非要终点画到起点才能闭合


1.在建造 地板 天花板 区域 时 画线时  当点击了3个点后 鼠标移动就出现了第4个点,虽然没有点击确定,但是要显示这个点到起点的角度
2.在建造 地板 天花板 时 画线时 屏幕右边会有一个操作提示面板 
描摹天花板轮廓 
完成天花板
Esc  取消

变成
鼠标左键描摹天花板轮廓 
鼠标双击 完成建造天花板 (增加)
确定键 完成建造天花板 
Esc  取消

3.在建造区域画线时 也增加相同的提示


1.在建造 地板 天花板 区域 时 画线时  当点击了3个点后 鼠标移动就出现了第4个点,,虽然没有单击确定这个点的角度还是没有显示,你上次改的起点那个角度 不会及更新

2.在建造 地板 天花板  区域  画线时 屏幕右边会有一个操作提示面板 
鼠标左键描摹天花板轮廓 
鼠标双击 完成建造天花板 (要增加鼠标双击 文字)
确定键 完成建造天花板 
 Shift 允许非45°角度
Esc  取消

1.在建造 地板 天花板  区域  画线时 屏幕右边会有一个操作提示面板 
鼠标左键描摹天花板轮廓 
 (修改)鼠标双击 完成建造天花板 (要增加鼠标双击 文字)
确定键 完成建造天花板 
 Shift 允许非45°角度
 (增加)Ctrl 保持90° 
Esc  取消

2.区域  Shift 允许非45°角度没有起作用

Ctrl 保持90° 没有起作用,应该是已经点击了3个点后 ,要画第4个点时 和起始点的角度锁定

建造墙体 
 (增加)Ctrl 保持90° 
 
 
 建造墙体时 不是有 
 Shift 允许非45°角度
但是现在没有按,它就允许了,要画第3个点时 就应该限制角度了 只能45°增减 

当我  建造墙体时 没有点击时 不是有一个鼠标指示标志码
当悬浮靠近的墙体 应该显示 
1.该墙体完全长高尺寸,
2.显示当前墙体左边到鼠标的距离
3.2.显示当前墙体右边边到鼠标的距离

这样才方便我计算从哪里开始连接这个墙体

你标了距离,但是没有画线啊 ,你可以参考当选中墙体时 它就会显示长高 和画线指示


悬浮靠近墙体时会显示:
墙体全长线条 + 标签 --- 从起点到终点的测量线,标签显示在中间,显示位置 保持在墙顶
起点到鼠标距离线条 + 标签 --- 从墙体起点到吸附点的测量线,显示位置改到 墙体中奖位置, 显示的字和线条
鼠标到终点距离线条 + 标签 --- 从吸附点到墙体终点的测量线,显示位置改到 墙底位置,显示的字和线条

已修改。现在三个测量线的Y位置分层显示:

墙体全长 --- 墙顶位置 (yTop = baseY + WALL_HEIGHT + 0.08)
起点到鼠标距离 --- 墙体中间位置 (yMid = baseY + WALL_HEIGHT / 2)
鼠标到终点距离 --- 墙底位置 (yBot = baseY + 0.08)
线条和标签分别在各自的高度层,避免重叠。

在增加一个指示
悬浮靠近墙体的墙体 改变一个颜色 淡黄色,点击后恢复

按住Ctrl 键 时 精细调节, 鼠标动一下 增长或减少0.01
建造墙体时 拉长距离 步长改成0.01

建造墙体时 屏幕右边会有一个操作提示面板 
鼠标左键描摹天花板轮廓 
 Shift 允许非45°角度
 (增加)Ctrl 精细调节, 鼠标动一下 增长或减少0.01
Esc  取消

而是按住 Ctrl 精细调节, 鼠标动一下 就 增长或减少0.01
而是按住 Ctrl 精细调节时,锁定旋转,不允许旋转

当我  建造墙体时 没有点击时 不是有一个鼠标指示标志码
这个的 按住 Ctrl 精细调节时,锁定旋转,不允许旋转
没有正确实现 参考建造墙体拉长的


 建造墙体时 没有点击时 ,靠近墙体吸附指示位置,这个没有起点,只有一个点,只能在按住Ctrl 时 记录鼠标位置 ,然后进行对比操作



建造墙体时 没有点击时 ,靠近墙体吸附指示位置,这个没有起点,只有一个点,只能在按住Ctrl 时 记录鼠标位置 ,然后进行对比操作


应该 按住 Ctrl 时 锁死指示物的位置 记录位置 如果鼠标向左或者向右移动
每0.5秒最多计算一次:鼠标离起点更远 → 长度 +0.01;更近 → 长度 -0.01
抖动阈值从 0.005 改为 0.3(30厘米),鼠标需要移动很远一段距离才会触发 ±0.01 的长度变化。
改变指示物的位置 

现在的问题是按住 Ctrl 时 就锁死了指示物的位置 ,移动鼠标不好改变


1.有的墙体被其他墙体十字交叉或者T形状连接了,大部分都会自动分段成多个墙体从交点位置,但是还有一部分没有分段
2.点击材质绘制 绘制时容易卡死然后 [viewer] WebGPU device lost: reason="unknown", message="A valid external Instance reference no longer exists.". Attempting auto-recovery.
特别是在更好材质赋值给墙体,切换赋值给下一个墙体 最容易触发



 墙体交叉不分段:现在除了正在创建的墙体,接触的分段了,但是创建的墙体没有分段
  材质绘制WebGPU崩溃:除了图片纹理 还有颜色赋值 ,颜色赋值 还是会卡
  
  
  
  我没有赋值纹理,只是创建多个墙体 后就报这个190条
  10xho6zew~_of.js:1016 [viewer] WebGPU uncaptured error: Vertex buffer slot 1 required by [RenderPipeline "renderPipeline_MeshBasicMaterial_89"] was not set.
 - While encoding [RenderPassEncoder (unlabeled)].DrawIndexed(36, 1, 0, 0, 0).
 - While finishing [CommandEncoder "renderContext_2"].
 GPUValidationError {message: 'Vertex buffer slot 1 required by [RenderPipeline "...le finishing [CommandEncoder "renderContext_2"].\n'}
a @ 10xho6zew~_of.js:1016
10xho6zew~_of.js:1016 [viewer] WebGPU uncaptured error: [Invalid CommandBuffer from CommandEncoder "renderContext_2"] is invalid due to a previous error.
 - While calling [Queue].Submit([[Invalid CommandBuffer from CommandEncoder "renderContext_2"]])
 GPUValidationError {message: '[Invalid CommandBuffer from CommandEncoder "render...dBuffer from CommandEncoder "renderContext_2"]])\n'}
a @ 10xho6zew~_of.js:1016




创建墙体交叉分段后,用鼠标悬浮 墙体吸附指示,有的墙体就会报这个 全部墙体都扫过后就在扫就不报了


材质绘制 点击 图片纹理后 鼠标悬浮到 墙体报这个错误
54ya.cc76-u2.js:230 THREE.Color: Unknown color library:wood-woodfine2
h3 @ 054ya.cc76-u2.js:230
setColorName @ 054ya.cc76-u2.js:230
setStyle @ 054ya.cc76-u2.js:230
set @ 054ya.cc76-u2.js:230
(anonymous) @ 1647rc2__s7g0.js:54
(anonymous) @ 1647rc2__s7g0.js:54
c @ 1647rc2__s7g0.js:54
(anonymous) @ 054ya.cc76-u2.js:1
emit @ 054ya.cc76-u2.js:1
r @ 054ya.cc76-u2.js:622
onPointerEnter @ 054ya.cc76-u2.js:622
(anonymous) @ 054ya.cc76-u2.js:622
(anonymous) @ 054ya.cc76-u2.js:622
(anonymous) @ 054ya.cc76-u2.js:622
054ya.cc76-u2.js:1016 [viewer/post-processing] Building pipeline {version: 0, ssgi: true, denoise: true, outline: true, perfDisable: {...}, ...}
点击后墙体还是赋予了纹理


但我创建多个墙体 后 有交叉的T形状的后,
墙体吸附指示用鼠标悬浮 ,有的墙体就会一直报这个  有的墙体不报这个
是不是交叉分段 部分没写好 或者是 当创建墙体封闭后 它会自动创建地板和天花板


点击了工具栏 材质绘制 后 如果鼠标悬浮在墙体或者地板上 就会显示一个黄色选项框,表示选中, 鼠标右键旋转镜头 ,过一会就会报这个错误

可以参考创建墙体交叉分段
1.现在复制的墙体移动到和其他墙体交叉不会分段,从交点位置分段成多个墙体
2.运行报了这些错误


可以参考创建墙体交叉分段
1.现在复制的墙体移动到和其他墙体交叉 点击左键确定放置后 不会分段,从交点位置分段成多个墙体

这个还是不会分段


建造两条竖的 一条横的,
当我移动 横的到 两条竖的交叉后, 竖的不是应该分成4段了码,现在有一段墙体消失了,报了给错误
复制时也是一样有一段墙体消失了,但是不报错误

报错是这个,
如果只是一个横竖交叉的话墙体不会消失一段

分段没有问题了

移动墙体和其他墙体交叉  点击左键确定放置后
报这个0nyi7uogf1a0r.js:54 Unable to preventDefault inside passive event listener invocation.
复制的不会

移动横着墙体和竖着墙体交叉
出现了横着墙体,最左边的这段墙是全长,其他段都分开了

复制墙体就不会出现这种情况

在选择模式下有时候 点击到 墙体4边封闭而创建的楼板时 ,
滚动鼠标滚轮就会缩放,导致报错 ,应该是鼠标滚轮滚动应该是控制镜头远近的


在选择模式下有时候 点击到 墙体4边封闭而创建的天花板时 ,
滚动鼠标滚轮就会缩放,导致报错 ,应该是鼠标滚轮滚动应该是控制镜头远近的



有时选中 楼板 和天花板 时报这个 就可以鼠标滚轮进行缩放大小位置
应该

建造墙体时  拉第7条墙体时 ,建造的墙体和其他墙体交叉在分段 时 接触的墙体消失有的旋转面向地面去了 报错


添加中文翻译
Upload scan/floorplan
No elements on this level

建造围栏 与其他围栏接触交叉的地方分段,和吸附指示,
像墙体一样,参考
墙体全长线条 + 标签 --- 从起点到终点的测量线,标签显示在中间,显示位置 保持在墙顶
起点到鼠标距离线条 + 标签 --- 从墙体起点到吸附点的测量线,显示位置改到 墙体中奖位置, 显示的字和线条
鼠标到终点距离线条 + 标签 --- 从吸附点到墙体终点的测量线,显示位置改到 墙底位置,显示的字和线条


建造楼板时,如果贴着附近的楼板创建,点击第4个点时就会出现没有确认就创建了,并且第4个点位置移动到了起点,变成了三角形去了,
如果 创建楼板 不贴着附近的楼板创建则正常没事


切换英文后 这几个没有及时改变,其他都变成英文了
场地 物品 设置 导出 帮助 
本地编辑器一场景不会被保存。 打开最近的场景 新建

apps/editor 关闭 F12调试页面窗口,

apps/editor  重新取一个中文名称


标题栏还是editor

帮助 版本信息 版本 构建日期 202 关于 Pascal编辑器 这是一个功能强大的3D建筑编辑器,支持场地编辑、建筑设计等功能。

提示还是 Pascal编辑器


侧边栏 场地 下 区域 这里还要硬编码英文
No zones on this level. Add one

还是不行
打包成 exe运行绿色运行版
查询激活
付款完成后,点击按钮查询并激活
网络错误,请检查网络连接
服务器也没有收到

可以添加输出log定位
,"logFile":"E:\\pythonProject\\editor-main\\apps\\editor\\release\\win-unpacked\\resources\\app\\logs\\pascal-editor-2026-05-28.log"}}


cd /d E:\pythonProject\editor-main\apps\editor
.\node_modules\.bin\electron -e "require('bytenode').compileFile('electron.cjs')"

cd /d E:\pythonProject\editor-main\apps\editor
npx electron -e "require('bytenode').compileFile('electron.cjs')"
npx electron -e "require('bytenode').compileFile('license-bridge.cjs')"

.\node_modules\.bin\electron -e "require('bytenode').compileFile('electron.cjs')"
相关推荐
会Tk矩阵群控的小木2 天前
rcs安卓增强短信群发系统搭建与API集成实战教程
矩阵·新媒体运营·安卓·个人开发·tk
2501_915921433 天前
Xcode与iOS SDK完整教程:从下载安装到配置优化全解析
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
码农阿强3 天前
DeepSeek-V4 Flash/Pro 技术深度解析:成本下降与场景适配
人工智能·ai·aigc·个人开发
会Tk矩阵群控的小木4 天前
2026最新iOS免越狱手机群控方案对比与技术难点实战解析
运维·macos·objective-c·cocoa·个人开发
星栈独行5 天前
别让 API 跳去登录页:我在 Axum 里做了认证失败双通道
前端·后端·rust·开源·github·个人开发
老虎海子6 天前
从零入门 OpenAI Codex|登录、权限、终端、记忆配置全实操
人工智能·vscode·自然语言处理·chatgpt·个人开发·业界资讯
甄心爱学习7 天前
【项目实训】法律文书智能摘要系统6
python·个人开发
2501_9159214310 天前
使用Swift和Xcode创建简单iOS应用完整教程
ide·vscode·ios·个人开发·xcode·swift·敏捷流程
fake_ss19810 天前
AI时代学习全栈项目开发的新范式
java·人工智能·学习·架构·个人开发·学习方法