editor

Overview

Pascal Editor is a web-based 3D building editor built with React Three Fiber and WebGPU. It allows users to create, edit, and share architectural designs with a node-based scene graph and real-time rendering.

README Preview

# Pascal Editor\n\nA 3D building editor built with React Three Fiber and WebGPU.\n\n[](LICENSE)\n[](https://www.npmjs.com/package/@pascal-app/core)\n[](https://www.npmjs.com/package/@pascal-app/viewer)\n[](https://discord.gg/SaBRA9t2)\n[](https://x.com/pascal_app)\n\nhttps://github.com/user-attachments/assets/8b50e7cf-cebe-4579-9cf3-8786b35f7b6b\n\n\n\n## Repository Architecture\n\nThis is a Turborepo monorepo with three main packages:\n\n```\neditor-v2/\n├── apps/\n│   └── editor/          # Next.js application\n├── packages/\n│   ├── core/            # Schema definitions, state management, systems\n│   └── viewer/          # 3D rendering components\n```\n\n### Separation of Concerns\n\n| Package | Responsibility |\n|---------|---------------|\n| **@pascal-app/core** | Node schemas, scene state (Zustand), systems (geometry generation), spatial queries, event bus |\n| **@pascal-app/viewer** | 3D rendering via React Three Fiber, default camera/controls, post-processing |\n| **apps/editor** | UI components, tools, custom behaviors, editor-specific systems |\n\nThe **viewer** renders the scene with sensible defaults. The **editor** extends it with interactive tools, selection management, and editing capabilities.\n\n### Stores\n\nEach package has its own Zustand store for managing state:\n\n| Store | Package | Responsibility |\n|-------|---------|----------------|\n| `useScene` | `@pascal-app/core` | Scene data: nodes, root IDs, dirty nodes, CRUD operations. Persisted to IndexedDB with undo/redo via Zundo. |\n| `useViewer` | `@pascal-app/viewer` | Viewer state: current selection (building/level/zone IDs), level display mode (stacked/exploded/solo), camera mode. |\n| `useEditor` | `apps/editor` | Editor state: active tool, structure layer visibility, panel states, editor-specific preferences. |\n\n**Access patterns:**\n\n```typescript\n// Subscribe to state changes (React component)\nconst nodes = useScene((state) => state.nodes)\nconst levelId = useViewer((state) => st