🎨 3D Graphics & Board Design

How the 3D board is rendered using Three.js, React Three Fiber, and the dynamic template system.

Board templates use Tailwind CSS classes that are extracted and converted to hex colors at runtime.

Complete Tailwind palette (14 colors × 11 shades) mapped to hex values. Templates are fetched from /api/packs/templates?id=boardId .

Rendering Pipeline

Board Layers (Bottom to Top)

Template System

Tile Decorations

Player Pieces & Animations

Template Properties