PASCAL EDITOR : éditeur 3D architectural open source
https://github.com/pascalorg/editor
📌 PASCAL EDITOR est un éditeur 3D architectural open source construit avec React Three Fiber et WebGPU, conçu pour créer et partager des projets de bâtiments en 3D directement dans le navigateur. Le projet repose sur une architecture modulaire en monorepo avec Turborepo, séparant la logique de base, le rendu 3D et l’interface utilisateur pour offrir une expérience de développement et d’utilisation fluide.
Pascal Editor simplifie la modélisation architecturale en proposant une approche basée sur des nodes hiérarchiques : Site → Building → Level → éléments structurels (murs, dalles, plafonds, toits) → items (portes, fenêtres, luminaires). Chaque node est stocké dans un dictionnaire plat avec des relations parent-enfant, ce qui permet une manipulation efficace des données et une persistance automatique via IndexedDB. L’état de la scène est géré par Zustand avec support undo/redo sur 50 étapes via Zundo, garantissant que toute modification peut être annulée.
Le système de rendu utilise React Three Fiber et Three.js avec support WebGPU pour des performances optimales. Les renderers créent des objets Three.js pour chaque type de node, et des systèmes géométriques (WallSystem, SlabSystem, CeilingSystem, RoofSystem, ItemSystem) traitent uniquement les nodes marqués comme « dirty » pour éviter les recalculs inutiles. Cette approche par dirty nodes permet des mises à jour en temps réel sans sacrifier les performances, même avec des scènes complexes.
- 🏗️ Architecture modulaire avec séparation claire entre core (schémas, state management, systèmes), viewer (rendu 3D) et editor (UI, outils)
- 🔄 Système de dirty nodes optimisé qui ne recalcule que la géométrie modifiée
- 📊 Hiérarchie de nodes intuitive : Site → Building → Level → Walls/Slabs/Ceilings/Roofs/Zones → Items
- 💾 Persistance automatique via IndexedDB avec undo/redo sur 50 étapes
- 🎨 Rendu WebGPU via React Three Fiber et Three.js
- 🔌 Système de plugins extensible pour ajouter de nouveaux types de nodes et des panels personnalisés
- 🛠️ Outils interactifs : SelectTool, WallTool, ZoneTool, ItemTool, SlabTool
- 🚀 Stack moderne : React 19, Next.js 16, Zustand, Zod, Bun, Turborepo
L’éditeur inclut des outils interactifs pour dessiner des murs, créer des zones, placer des éléments et définir des dalles. Le SpatialGridManager gère la détection de collision et la validation de placement, tandis qu’un event bus typé permet la communication inter-composants pour les interactions (clics, hover, context-menu). Les systèmes viewer gèrent la visibilité des niveaux en modes empilés, explosés ou solo, ainsi que l’affichage des scans 3D et des guides de référence 2D.
Pascal Editor est entièrement extensible via un système de plugins qui permet d’ajouter de nouveaux types de nodes avec leurs propres schémas, rendus 3D/2D, outils de placement et paramètres d’inspecteur. Le projet fournit un plugin exemple (packages/plugin-trees) avec des arbres procéduraux, fleurs et herbe pour servir de base. Le code est publié en packages npm (@pascal-app/core, @pascal-app/viewer) sous licence MIT, avec une application Next.js disponible sur editor.pascal.app.
Le développement se fait via bun install puis bun dev depuis le répertoire racine pour activer le hot reload sur tous les packages. Les commandes turbo build permettent de construire les packages pour production, et les packages core et viewer peuvent être publiés sur npm pour être réutilisés dans d’autres projets. La structure de fichiers est organisée logiquement avec les schémas de nodes dans packages/core/src/schema/, les systèmes dans packages/core/src/systems/, et les renderers dans packages/viewer/src/components/renderers/.
Concrètement, Pascal Editor est une solution complète pour la modélisation architecturale web qui combine performance, extensibilité et facilité de développement, avec un architecture propre et une documentation détaillée pour les contributeurs et les utilisateurs de plugins.
