Pascal Editor - 项目描述

项目简介

Pascal Editor 是一款基于 React Three Fiber 和 WebGPU 构建的 3D 建筑编辑器，支持创建和分享三维建筑项目。用户无需任何本地安装，直接通过浏览器即可进入编辑器界面，通过直观的交互方式设计建筑模型，并导出或分享给其他人。编辑器提供了从基础几何体到复杂建筑结构的完整工具链，支持实时预览和参数化调整。

核心功能

• WebGPU 3D 渲染引擎：利用 WebGPU 的高性能计算能力，实现流畅的 3D 建筑模型编辑体验
• 参数化建模：支持通过参数控制建筑尺寸、比例、材质等属性，实现可复用的建筑模板
• 实时预览：所有修改即时反映在 3D 视图中，所见即所得
• 浏览器端运行：基于 React Three Fiber 构建，通过 npx 即可在浏览器中打开，无需本地编译
• 内置节点库：提供丰富的建筑构件节点库，包含门、窗、楼梯等常用建筑元素
• 捕获协议（Capture Protocol）：支持将编辑过程记录为可重放的操作序列
• MCP 服务集成：内置 MCP（Model Context Protocol）服务，支持 AI 辅助编辑
• VSCode 集成：提供与 VSCode 的深度集成选项

技术实现

Pascal Editor 的前端基于 React + TypeScript 构建，核心渲染层使用 React Three Fiber（R3F），后者是 Three.js 的 React 绑定库，能够以声明式方式构建 3D 场景。项目使用 WebGPU 作为渲染后端，WebGPU 是新一代浏览器图形 API，相比 WebGL 具有更低的 CPU 开销和更高的并行计算能力，适合复杂 3D 场景的实时渲染。

编辑器内置的节点系统（Pascal Nodes）采用数据驱动设计，每个节点封装了特定的建筑构件逻辑（如几何形状、材质属性、物理参数），用户通过节点编辑器将不同构件组合成完整建筑。节点之间的连接定义了建筑构件之间的约束关系，修改一个节点参数会自动传播到相关联的其他节点。

项目的 MCP 服务通过 Node.js 实现，在后台运行一个认证的 MCP 服务器，为 AI 编码助手（如 Cursor、Claude Code）提供连接到编辑器的接口，使 AI 能够理解项目结构并进行智能化辅助设计。

快速上手

1. 启动编辑器：在终端运行 npx @pascal-app/cli editor，Node.js 22.13+ 会自动下载安装并启动 Pascal Editor
2. 探索界面：启动后浏览器自动打开编辑器界面，左侧为节点库面板，中间为 3D 画布，右侧为属性面板
3. 添加建筑构件：从左侧节点库拖拽门、窗、墙等基础构件到画布中，构建设计布局
4. 调整参数：选中任意构件，在右侧属性面板调整尺寸、高度、材质等参数，3D 视图实时更新
5. 保存与导出：通过编辑器菜单保存项目为本地 JSON 文件，或导出为 3D 通用格式

适用人群

• 建筑设计师：需要快速可视化建筑方案的从业者
• 教育工作者：建筑学、城市规划相关专业的师生
• 独立开发者：对 3D 建筑可视化感兴趣的个人开发者
• AI 辅助设计研究者：探索 AI + 参数化建筑设计交叉领域的团队

官网链接

https://editor.pascal.org