New FloorplanImporter module that accepts floor plan images (architect
drawings, realtor photos, hand sketches) and uses Claude or OpenAI vision
APIs to convert them into the project's house JSON format for immediate
3D viewing.
Features:
- Drag-and-drop image upload with preview
- Multi-provider support (Claude Sonnet, GPT-4o)
- Canvas preprocessing (resize to 2048px max)
- Structured prompt engineering for accurate room extraction
- JSON validation and auto-repair of common LLM output issues
- Result preview showing rooms, doors, windows counts
- Inline JSON editor for manual corrections
- API key persistence in localStorage
- Integrated into sidebar File section as "Import Floor Plan" button
- Small apartment (60sqm): 5 rooms, single floor compact city layout
- Modern loft (80sqm): 6 rooms, open-plan living with high ceilings
- Large villa (300sqm): 15 rooms across 2 floors with luxury finishes
Each house includes both structure definition and furnished design
with realistic furniture placement using the existing catalog.
Adds HouseEditor panel to the right sidebar with:
- Edit house name and description
- Adjust building footprint dimensions
- Add/remove floors with ceiling height control
- Add/remove rooms with name, type, and dimensions
- Edit selected room: name, type, dimensions, position, flooring
- Save house as JSON template
- Create new empty house from scratch
- Create data/ikea-catalog.json with 41 curated IKEA items across 23 series
(KALLAX, BILLY, MALM, PAX, HEMNES, LACK, etc.) with verified dimensions
- Add source tabs (All/Standard/IKEA) to catalog panel for filtering
- Add IKEA series filter bar when viewing IKEA items
- Add IKEA badge and series label on item cards
- Add mergeCatalog() to renderer for loading additional catalog files
- Add scripts/import-ikea-hf.js for importing from HuggingFace dataset
Adds a "Create Custom Furniture" button at the bottom of the catalog
sidebar that expands into a form with fields for name, dimensions
(W/D/H in meters), color picker, and category selector. Submitting
creates a simple box-geometry catalog item and adds it to the
in-memory catalog for immediate placement into rooms.
- ExportManager with JSON export (toJSON + timestamp), import with
file picker and validation, and high-res PNG screenshot capture
- Save/Load/Screenshot buttons in sidebar
- Ctrl+S keyboard shortcut for quick save
- Design load event updates info bar
- Mode system: view | select | move | rotate | place
- Click furniture to select with cyan wireframe outline
- Keyboard: R/Shift+R rotate, Delete remove, Escape deselect,
Ctrl+Z undo, Ctrl+Shift+Z/Ctrl+Y redo
- Listens to DesignState changes to sync scene on undo/redo
- Wired into index.html with DesignState integration
- Added furnitureIndex to mesh userData for state lookups
Lightweight state management for furniture editing. All mutations go
through named methods that snapshot state for undo, then notify
listeners. Supports move, rotate, add, remove, full design load,
and serialization via toJSON().
- Export COLORS for external module access (themes)
- Extend _onClick to detect furniture clicks before room clicks,
dispatching 'furnitureclick' with catalog/room/mesh details
- Add setControlsEnabled(enabled) to toggle OrbitControls
- Dispatch 'floorchange' event from showFloor()
- Wire up furnitureclick in index.html to show item info
Renderer improvements:
- Configure shadow camera frustum to cover full house (was default -5..5)
- Add geometry and material caching to reduce GPU allocations
- Add proper disposal of Three.js objects on floor switch (fix memory leak)
- Add error handling for fetch failures with custom event dispatch
- Add room labels as sprites floating in each room
- Support wall-mounted furniture Y positioning via position.y
- Use cached highlight materials instead of mutating shared materials
Data fixes:
- Fix critical room overlap on upper floor: og-kinderzimmer1 and
og-elternbad were overlapping by 2.5x2.0m. Adjusted room positions:
kz1 length 4->3m, elternbad y 2->3, schlafzimmer y 5->6/length 5->4
- Extend upper hallway to full building depth (y=0..10) for proper
door connectivity to all rooms
- Fix all upper hallway door positions for new layout
- Move eg-esszimmer door from south wall to west wall (correct shared
boundary with hallway)
- Remove kitchen-to-living-room door (rooms not adjacent, 1m gap)
- Fix og-flur-d5 partial misalignment with gaestezimmer
- Add Y positions for wall-mounted furniture (mirror, wall cabinets,
bathroom cabinets) so they render on walls instead of floor
- Adjust furniture positions in resized rooms (kz1, schlafzimmer)
- loadCatalog() and loadDesign() methods on HouseRenderer
- Builds Three.js meshes from catalog part definitions (box/cylinder)
- Places furniture in room-local coordinates with rotation
- Furniture clears and re-renders on floor switch
- index.html loads catalog and design after house data
Covers both floors of the sample house with 71 furniture placements.
Each item has room-local position and rotation, referencing the
furniture catalog IDs. Layouts respect door/window clearances.
renderer.js: HouseRenderer class that loads house JSON and renders
rooms as 3D geometry - walls with door/window cutouts, floors with
material colors, translucent ceilings, orbit camera controls, room
click selection and highlighting.
index.html: Viewer page with sidebar showing floor switcher and
room list with areas. Click rooms in 3D or sidebar to focus camera.
Uses Three.js via CDN importmap (no build step needed).
Einfamilienhaus with 14 rooms across ground floor and upper floor:
- EG: Flur, Wohnzimmer, Küche, Esszimmer, Arbeitszimmer, Gäste-WC, HWR
- OG: Flur, Schlafzimmer, Elternbad, 2x Kinderzimmer, Badezimmer, Gästezimmer
Each room includes position, dimensions, wall types, doors with
connections, and windows with sill heights. ~205sqm total.
Covers all rooms (Wohnzimmer, Kueche, Schlafzimmer, Kinderzimmer,
Badezimmer, Arbeitszimmer, Flur, Gaeste-WC) with realistic metric
dimensions and Three.js-compatible 3D mesh definitions using box
and cylinder primitives.
