Pascal Editor — Trình Biên Tập 3D Kiến Trúc Với R3F

Hầu hết các công cụ thiết kế kiến trúc đều là phần mềm độc quyền đắt đỏ (Revit, ArchiCAD) hoặc các công cụ web hạn chế. Pascal Editor không phải cả hai — nó là trình biên tập 3D mã nguồn mở được xây dựng với công nghệ web hiện đại, cụ thể là React Three Fiber và WebGPU, được thiết kế để tạo và chia sẻ các dự án kiến trúc trong trình duyệt.

Pascal Editor là gì?#

Pascal Editor là trình biên tập 3D được phát triển bởi PascalOrg. Đây là một monorepo Turborepo với kiến trúc tinh vi phân tách các mối quan tâm qua năm package:

• @pascal-app/core — Schema node, trạng thái scene (Zustand), registry contracts, truy vấn không gian và event bus
• @pascal-app/viewer — Render 3D qua React Three Fiber, hệ thống render dùng chung, camera/controls và post-processing
• @pascal-app/editor — Công cụ biên tập, panel, chọn và UI thao tác trực tiếp
• @pascal-app/nodes — Plugin registry tích hợp với định nghĩa node, renderer, hình học và hệ thống
• @pascal-app/ui — Component UI dùng chung

Trình biên tập chạy như một ứng dụng Next.js 16 với React 19, sử dụng WebGPU để render và Bun làm trình quản lý package.

Kiến trúc cốt lõi#

Scene Graph dựa trên Node#

Mọi thứ trong Pascal Editor đều là một node. Tất cả node mở rộng từ một kiểu cơ sở:

BaseNode {
  id: string
  type: string
  parentId: string | null
  visible: boolean
  camera?: Camera
  metadata?: JSON
}

Các node tạo thành hệ thống phân cấp:

Site
└── Building
    └── Level
        ├── Wall → Item (doors, windows)
        ├── Slab
        ├── Ceiling → Item (lights)
        ├── Roof
        ├── Zone
        ├── Scan (3D reference)
        └── Guide (2D reference)

Phần thông minh: các node được lưu trong một từ điển phẳng (Record<id, Node>), không phải cây lồng nhau. Quan hệ cha-con được duy trì qua parentId và mảng children, giúp tra cứu nhanh và quản lý trạng thái đơn giản.

Quản lý trạng thái với Zustand#

Mỗi package có store Zustand riêng:

Hệ thống Dirty Node#

Khi một node thay đổi, nó được đánh dấu là dirty. Các hệ thống kiểm tra tập dirty mỗi frame và chỉ tính toán lại hình học cho các node bị ảnh hưởng. Đây là cách Pascal Editor đạt được hiệu suất thời gian thực trong trình duyệt.

Kiến trúc Systems#

Systems là các component React chạy trong render loop (useFrame) để cập nhật hình học và biến đổi:

Scene Registry#

Registry ánh xạ ID node đến đối tượng Three.js để tra cứu nhanh:

sceneRegistry = {
  nodes: Map<id, Object3D>,
  byType: { wall: Set<id>, item: Set<id>, zone: Set<id>, ... }
}

Spatial Grid Manager#

Xử lý phát hiện va chạm và xác thực vị trí — được các công cụ đặt vật phẩm sử dụng để xác thực vị trí và tính toán cao độ sàn.

Công cụ biên tập#

Trình biên tập cung cấp thanh công cụ với các công cụ chuyên biệt:

• SelectTool — Chọn và thao tác với điều hướng phân cấp
• WallTool — Vẽ tường với mitering và cutouts
• ZoneTool — Tạo vùng chức năng
• ItemTool — Đặt đồ nội thất, thiết bị, cửa, cửa sổ
• SlabTool — Tạo sàn

Hệ thống Plugin#

Pascal Editor có thể mở rộng qua plugin. Plugin cung cấp các loại node (schema, render 3D/2D, công cụ đặt, inspector parametrics) và panel qua cùng manifest như built-in.

Công nghệ sử dụng#

Bắt đầu#

git clone https://github.com/pascalorg/editor
cd editor
bun install
bun dev
# Mở http://localhost:3002

Tại sao Pascal Editor quan trọng#

Hầu hết trình biên tập 3D mã nguồn mở đều là game engine (Godot) hoặc công cụ CAD đa năng. Pascal Editor được xây dựng chuyên biệt cho thiết kế kiến trúc — với mitering tường, tạo sàn, quản lý tầng và cutouts cửa/cửa sổ tích hợp sẵn.

Trình render WebGPU cho phép xử lý các mô hình xây dựng phức tạp trong trình duyệt với hiệu suất thời gian thực. Và kiến trúc plugin cho phép nó phát triển từ trình biên tập tòa nhà thành nền tảng thiết kế kiến trúc hoàn chỉnh.

Đối với nhà phát triển, đây cũng là một masterclass về kiến trúc React Three Fiber — cho thấy cách cấu trúc store, system, renderer và plugin trong ứng dụng 3D thực tế.

Tài liệu tham khảo#

• Pascal Editor GitHub Repository ↗
• PascalOrg on GitHub ↗
• React Three Fiber Documentation ↗