### [Pascal editor：3D 建筑编辑器，网页端的“云原生”建模工厂。像搭积木一样拖拽墙体、堆叠楼层，全程 3D 可视化](https://www.appmiao.com/article/3174)

**Published:** 2026-03-23T02:12:54

**Author:** 阿喵

**Excerpt:** 阿喵前言 以前搞建筑建模或者室内设计，第一步永远是安装几 GB 大小的专业软件，还得祈祷显卡驱动别出问题。虽然现在 Web 技术很强，但能在浏览器里流畅跑完“建模、排布、渲染”全流程的工具依然不多见。 今天分享的这个开源项目 Pascal，

## 阿喵前言

以前搞建筑建模或者室内设计，第一步永远是安装几 GB 大小的专业软件，还得祈祷显卡驱动别出问题。虽然现在 Web 技术很强，但能在浏览器里流畅跑完“建模、排布、渲染”全流程的工具依然不多见。

今天分享的这个开源项目 **Pascal**，打破了“专业建模必装软件”的刻板印象。它利用现代前端架构，在网页里实现了一套极其丝滑的 3D 建筑编辑体验。无论是想快速拉个户型图，还是想展示复杂的楼层叠拼，打开浏览器就能开工。

## 项目介绍

**Pascal** 是一款基于 Next.js 开发的开源 3D 建筑编辑器。它并不是简单的 3D 模型预览器，而是一个拥有完整“建筑 -> 楼层 -> 墙体 -> 区域”层级体系的专业级工具。它底层采用了高性能的 ECS（实体组件系统）架构，配合 GPU 驱动的更新系统，确保了即便在处理复杂建筑场景时，浏览器依然能保持高帧率运行。

### 网站截图

![](https://pic.amiao.app/2026/03/23021237/3D%E7%BC%96%E8%BE%91%E5%99%A8-1024x568.webp)

### 技术亮点

-   **高性能渲染引擎**：基于 GPU 驱动的更新系统和 **脏节点追踪技术（Dirty Node Tracking）**。这意味着当你修改一堵墙时，系统只会重新计算受影响的部分，而不是刷新整个 100 层的场景，资源利用率非常精准。
-   **云原生开发架构**：采用 Next.js 构建，本质上就是一个网页。开发者可以轻松将其部署为 SaaS 服务，用户无需下载任何桌面安装包。
-   **可靠的状态管理**：内置 Zustand 管理全局状态，原生支持完整的 **撤销（Undo）与重做（Redo）** 操作。这对于复杂的建模任务来说，是保证容错率的刚需。
-   **深度的 3D 可视化交互**：你可以直接在 3D 视图下通过鼠标拖拽来改变墙体位置、调整楼板形状，甚至可以一键拆解、堆叠任意楼层，方便查看内部的细节构造。

### 核心功能

-   **层级化编辑**：严格遵循建筑逻辑，从整体建筑到单个房间区域（Zone）都有清晰的层级映射。
-   **实时几何计算**：墙体与楼板的交接、形状的闭合都由底层算法实时计算，确保 3D 模型在视觉上是严丝合缝的。
-   **灵活的视图控制**：支持自由视角切换，配合流畅的 UI 交互，让非专业用户也能快速上手进行空间布局。
-   **代码简洁可扩展**：项目采用 TypeScript 编写，对于想要二次开发建筑类软件或者数字孪生平台的开发者来说，这是一个极佳的脚手架。

## 使用说明

如果你是开发者想本地部署，或者只是想去 Demo 页面体验：

1.  **访问 Demo**：直接进入官网 [editor.pascal.app](https://editor.pascal.app/)。
2.  **创建楼层**：在左侧面板添加新楼层，你会看到 3D 空间中立即出现了对应的楼板层级。
3.  **绘制与拖拽**：在平面或 3D 视图下选定墙体，直接拖动即可实时看到建筑轮廓的变化。
4.  **拆解查看**：利用楼层堆叠功能，可以像玩抽屉一样把不同层级拉出来单独审视。

## 项目地址

-   **在线体验**：[https://editor.pascal.app/](https://editor.pascal.app/)
-   **GitHub 源码**：[https://github.com/pascalorg/editor](https://github.com/pascalorg/editor)

* * *

这种把复杂 CAD 逻辑搬进 Web 端并保持高性能的项目，非常适合用在智能家居展示、房产可视化或者简单的室内设计场景中。

**Tags:** 3D建模, AUTOCAD, CAD, 在线CAD, 源码

**Categories:** 开源项目

---