Spatia3D - Parametric Room Engine

Interactive 3D room configurator built for architecture and interior workflows. Users adjust room dimensions and immediately see a measurable, orbitable diorama in real-time.

Why this project is interview-relevant

• Demonstrates practical 3D web product engineering using React Three Fiber.
• Shows spatial math implementation from user inputs to rendered geometry.
• Uses a UI architecture that can plug into an AI-first design platform (2D AI render tab + 3D spatial tab).
• Deployable as a production-ready frontend with clear component structure.

Stack

• React 19 + TypeScript + Vite
• three + @react-three/fiber + @react-three/drei
• framer-motion for meaningful UI transitions
• CSS variables + custom layout system (responsive, mobile-safe)

Features

• Parametric room dimensions: Length, Width, Height
• Diorama rendering strategy:
  • Floor plane
  • Back wall
  • Left wall
  • Front and right open for usability
• Orbit and zoom camera controls
• Dynamic measurement labels with HTML overlays inside the scene
• Real-time computed metrics:
  • Floor area
  • Volume
  • Visible wall area
• Preset room profiles and unit toggle (ft/m)
• OpenRouter AI concept generator that maps prompts to material palettes (Modern/Industrial/Neutral)
• Procedural floor grid texture + contact shadows for grounded realism

AI setup (OpenRouter)

1. Create .env.local at the project root.
2. Add:

VITE_OPENROUTER_API_KEY=your_key_here
VITE_OPENROUTER_MODEL=meta-llama/llama-3.2-3b-instruct:free

3. Restart dev server with npm run dev.

Notes:

• .env.local is ignored by git.
• If the model/API is rate-limited, the UI shows a clear retry message to users.

Local development

npm install
npm run dev

Open the local URL printed by Vite.

Production build

npm run build
npm run preview

Deployment

Vercel

• Framework preset: Vite
• Build command: npm run build
• Output directory: dist

Netlify

• Build command: npm run build
• Publish directory: dist

Architecture notes

• src/scene/RoomCanvas.tsx: Canvas, lighting, controls, environment.
• src/scene/DioramaRoom.tsx: Geometric room meshes and measurement overlays.
• src/components/DimensionControl.tsx: Reusable slider control.
• src/components/StatsPanel.tsx: Room analytics cards.
• src/lib/metrics.ts: Presets, clamping, derived calculations.

Interview talking points

• Why R3F over raw Three.js:
  • Better lifecycle integration with React state and component composition.
• Why open-wall diorama:
  • Improves visibility and avoids camera trapping/lighting drawbacks of a closed box.
• How dynamic updates work:
  • Room dimensions are stored in React state and directly mapped to geometry args/positions.
• How this scales in an AI platform:
  • Same input schema can feed AI floor plan generation, material estimation, and 3D previews.

Next enhancements (if asked)

• Export snapshots and PDF reports
• Add BIM-ready metadata per surface
• Integrate backend APIs for AI-generated styles/material suggestions
• Add cost estimate module using area + material rate tables