Architectural Mental Models for 3D Spatial Applications

Foundational mental models for state orchestration, the Unidirectional 3D Triad, declarative-imperative separation, and subsystem boundaries.
Published: 7/10/2026

Building interactive 3D spatial web applications requires a clear conceptual mental model to avoid race conditions, memory leaks, and tightly coupled spaghetti code between 2D UI touch events and 60fps WebGL rendering loops.

1. The Unidirectional 3D Triad

Aircada enforces a unidirectional data flow: React UI Overlays dispatch user actions $\rightarrow$ Global Reactive Store updates $\rightarrow$ Singleton @System managers orchestrate validation and pricing $\rightarrow$ Modular @Operator scene mutators imperatively manipulate 3D SceneObjects $\rightarrow$ WebGL Canvas renders the frame. State never flows backwards from 3D meshes into UI state without passing through the central store.

2. Singleton Systems vs Scene Operators

Systems (@System) are headless, backend-managed singletons responsible for global lifecycle, event bus coordination, commercial pricing formulas, and validation gating. They have no Visual Studio UI presence. In contrast, Operators (@Operator) are modular, reusable scene mutators decorated with @Input(), @Property(), and @OnEvent() for direct imperative control of 3D meshes, shaders, and animations.

3. Declarative Specification vs Imperative Execution

Product catalogs, option sets, and pricing offsets are defined declaratively in clean tabular datasets (.airpds) and stripped pricing models (.airpm). Imperative business logic, event routing, and WebGL shader parameters live in compiled TypeScript classes.

4. Global Reactive Store vs Local React State

Any state that affects 3D visual rendering, pricing computation, or ecommerce checkout payloads MUST reside in the Twin-Proxy store (store.properties). Pure UI transient state (active tab index, accordion toggle, hover tooltip) remains in local React useState.

  • The Unidirectional 3D Triad: UI $\rightarrow$ Store $\rightarrow$ @System $\rightarrow$ @Operator $\rightarrow$ 3D Canvas guarantees zero race conditions.
  • Systems (Orchestrators) vs Operators (Mutators): Use @System for headless singleton state logic and @Operator for 3D scene mesh manipulation.
  • Declarative vs Imperative: Separate tabular option matrices (.airpds) from executable TypeScript logic.
  • Store vs Local State: Only store properties affecting 3D visuals or commercial checkout belong in the global reactive store.