Room VSA
Room Visual Space Analysis
Description
Room VSA is a high-performance, client-side web application designed for 3D room visualization and interior design. Built with React 19, Vite, and React Three Fiber, it enables users to dynamically model a room, configure dimensions, customize surface colors and lighting, and manage furniture in a 3D space in real-time.
Features
3D Visualization & Room Configuration
Real-time rendering using Three.js and React Three Fiber. Users can adjust the physical dimensions of the room (width, length, height) in real-time. Surface customization allows wall color, floor color, and themes to be instantly modified via hex color values. Features configurable ambient and ceiling light colors and intensities, alongside window tint and opacity controls.
Furniture & Item Management
Supports varied item types including wardrobes, tables, pots, beds, doors, windows, and more. Furniture can be added, moved, rotated, and resized with automatic vertical offset calculation for floor-bound items. Also includes advanced properties like secondary colors, wood types, directional flipping, and cloning functionalities.
Secure Local Persistence
Your room layout is automatically saved securely to your browser’s local storage. The schema allows downloading configurations as JSON files and loading them back.
Data Security & Integrity
Strictly models all entities and configurations using Zod schemas. When hydrating data, it intercepts raw JSON ensuring that tampered data cannot break the application or trigger out-of-bounds rendering errors.
Technical Stack
- Core Framework: React 19 (via
@vitejs/plugin-react) - Language: TypeScript
- 3D Engine:
three,@react-three/fiber,@react-three/drei,@react-three/csg&three-bvh-csg - State Management:
zustandwithpersistmiddleware - Schema Validation:
zod - Build Tool: Vite
Architecture & State Management
The UI and 3D scenes are strictly decoupled. The component structure handles heavy lifting of Three.js rendering (Scene.tsx & Room.tsx), dynamic 3D rendering of furniture (Furniture.tsx), and a React-based 2D overlay for interaction (ControlPanel.tsx).
The application relies on a single, unified Zustand store (useRoomStore), holding all primitive configurations and an array of FurnitureItem objects. Reducer-like actions directly bind to the store, ensuring predictable state mutations.
As a zero-backend architecture, load times are dictated entirely by static asset delivery. It utilizes React 19 concurrent features and Vite’s Rollup-based production builds, with three-bvh-csg optimizing Constructive Solid Geometry using Bounding Volume Hierarchies to accelerate complex 3D boolean operations.
Deployment
Room VSA is deployed on Cloudflare Pages and Workers. It is configured as a Single-Page Application via Cloudflare’s static asset bindings and mapped to the custom domain roomvsa.nicx.dev.