FloorGPT is a React + Three.js web application that transforms floor plan images into structured scene data and renders an interactive 3D building model.
- ✅ Phase 1 complete: project setup, polished upload UX, JSON preview, and interactive 3D viewer shell
- ✅ Phase 2 complete: Gemini parsing hardening with robust JSON extraction and normalization
- ✅ Default Gemini model set to
gemini-3.1-pro-preview - ✅ Phase 3 complete: geometry generation includes door/window wall cutouts and explicit wall rendering from parsed wall segments
- ✅ Phase 4 complete: lighting rig, shadow toggle, and shading modes (Phong/Lambert/Basic) are integrated
- ✅ Phase 5 complete: CSS2D room labels, minimap overlay, flythrough interactions, and collapsible JSON preview are integrated
- React + Vite
- Three.js + WebGL
- Tailwind CSS
- Google Gemini API (Vision via inline image request)
-
Install dependencies:
npm install
-
Create local environment file:
cp .env.example .env.local
On Windows PowerShell:
Copy-Item .env.example .env.local -
Add your Gemini API key to
.env.local:VITE_GEMINI_API_KEY=your_key_here VITE_GEMINI_MODEL=gemini-3.1-pro-preview
VITE_GEMINI_MODELis optional, but defaults togemini-3.1-pro-preview. -
Run the app:
npm run dev
-
Build for production:
npm run build
- If no API key is set, the app automatically uses a mock floor plan response so the UI and 3D pipeline remain fully testable.
- The Gemini service strips fences, extracts JSON objects, and repairs minor syntax issues (like trailing commas) before parsing.
- The parser now normalizes partially malformed lists safely and keeps valid rooms/walls/doors/windows.
- Viewer toolbar supports shading mode switching, shadow on/off, and light intensity tuning for evaluation demos.
- Viewer now includes CSS2D room labels, a live minimap camera indicator, and a start/stop flythrough mode.
- Performance pass: 3D viewer is lazy-loaded with
React.lazy, and Vite splits Three.js into dedicated vendor chunks for improved caching and startup cost.