WallSystem

React component that manages wall geometry generation with automatic mitering and CSG cutouts

Overview

The WallSystem is a React component that processes dirty wall nodes and generates 3D geometry with:

• Automatic mitering at wall junctions (L-joints, T-joints, corners)
• CSG cutouts for doors and windows using three-bvh-csg
• Level-aware processing with slab elevation support
• Adjacent wall updates when walls share junctions

The system runs in a useFrame hook at priority 4, ensuring walls update after items and slabs.

Location

~/workspace/source/packages/core/src/systems/wall/wall-system.tsx

How It Works

Processing Pipeline

1. Collect dirty walls by level

   The system groups dirty wall nodes by their parent levelId to process walls on the same floor together.

2. Calculate miter data

   For each level with dirty walls, the system calls calculateLevelMiters() to compute junction intersections for all walls on that level.

3. Update dirty walls

   Each dirty wall gets new geometry via updateWallGeometry(), which:

   • Retrieves slab elevation from the spatial grid
   • Collects child nodes (doors, windows)
   • Generates extruded wall geometry with mitering
   • Applies CSG subtraction for cutouts
   • Updates the mesh and collision mesh
4. Update adjacent walls

   Walls that share junctions with dirty walls also get updated to maintain consistent mitering.

Geometry Generation

The generateExtrudedWall() function builds wall geometry in these steps:

1. Build polygon in world coordinates using junction miter data
2. Transform to wall-local coordinates (x along wall, z perpendicular)
3. Create THREE.Shape and extrude along height
4. Rotate geometry so extrusion becomes vertical (Y-axis)
5. Apply CSG subtraction for door/window cutouts

Props

The WallSystem component has no props. It reads state from the Zustand store:

dirtyNodes · Set<AnyNodeId>

Set of node IDs that need geometry updates

nodes · Record<AnyNodeId, AnyNode>

All nodes in the scene graph

Dependencies

WallNode Schema

The system processes WallNode objects with these properties:

id · string · required

Unique wall identifier

start · [number, number] · required

Start point in level coordinates [x, z]

end · [number, number] · required

End point in level coordinates [x, z]

thickness · number · default: "0.1"

Wall thickness in meters

height · number · default: "2.5"

Wall height in meters

parentId · string

Parent level ID

children · string[]

Child item IDs (doors, windows)

External Systems

• Scene Registry (sceneRegistry.nodes): Maps node IDs to THREE.js meshes
• Spatial Grid Manager (spatialGridManager): Provides slab elevation data
• Wall Mitering (wall-mitering.ts): Calculates junction intersections

Mitering Algorithm

The mitering system handles complex wall intersections:

Junction Detection

interface Junction {
  meetingPoint: Point2D
  connectedWalls: Array<{
    wall: WallNode
    endType: 'start' | 'end' | 'passthrough'
  }>
}

The algorithm detects:

• Corner junctions: Two or more walls meeting at endpoints
• T-junctions: A wall endpoint touching another wall’s segment

Miter Calculation

For each junction:

1. Sort walls by outgoing angle
2. Compute left and right edge lines for each wall (offset by thickness/2)
3. Intersect adjacent wall edges to find miter points
4. Build polygon with miter points at junctions and center vertices for clean fans

See ~/workspace/source/packages/core/src/systems/wall/wall-mitering.ts for implementation.

CSG Cutouts

Doors and windows create cutouts using Constructive Solid Geometry:

1. Find cutout meshes

   Child nodes with a mesh named 'cutout' are collected.

2. Create cutout brushes

   Each cutout’s bounding box is transformed to wall-local space and extruded through the wall thickness.

3. Subtract from wall

   The CSG evaluator subtracts each cutout brush from the wall geometry using SUBTRACTION operation.

const csgEvaluator = new Evaluator()
let resultBrush = wallBrush
for (const cutoutBrush of cutoutBrushes) {
  cutoutBrush.updateMatrixWorld()
  const newResult = csgEvaluator.evaluate(
    resultBrush,
    cutoutBrush,
    SUBTRACTION
  )
  resultBrush = newResult
}

Usage in Viewer

import { WallSystem } from '@pascal/core/systems/wall/wall-system'

function Viewer() {
  return (
    <Canvas>
      {/* Other scene content */}
      <WallSystem />
    </Canvas>
  )
}

The system automatically:

• Monitors the dirtyNodes store
• Updates walls when they’re marked dirty
• Maintains consistent geometry across all walls on a level

Performance Notes

• Processes walls level-by-level to share miter calculations
• Reuses a single csgEvaluator instance for all CSG operations
• Only updates dirty walls and their immediate neighbors
• Pre-computes BVH trees for efficient CSG operations
• Disposes old geometries to prevent memory leaks

Related

• SlabSystem - Manages floor geometry
• CeilingSystem - Manages ceiling geometry
• ItemSystem - Positions items on walls