A lightweight, open-source Sims-like house builder built entirely in the browser using Three.js.
This repository provides a polished, grid-based architecture and interior design system featuring wall patterns, floor styles, modular stairs, and dynamic UI panels.
Built with Next.js 15, React 18, Three.js, and Tailwind CSS. No backend, no authentication — everything runs client-side.
app/ Next.js entry, no auth wrapper
components/
├── ui/ shadcn-style primitives
└── room-organizer/
├── room-organizer.tsx Orchestrator (~1030 lines)
├── index.ts Barrel export
├── contexts/ React Context (eliminates prop drilling)
│ ├── room-editor-context.tsx Layout, actions, view, history, game state
│ ├── selection-context.tsx Selected item(s), multi-select
│ └── index.ts Barrel
├── lib/ Pure domain code, no React/Three
│ ├── types.ts RoomLayout / FloorLayout / ViewSettings / etc.
│ ├── constants.ts Catalog (67 items), templates, MAX_FLOORS
│ ├── schema.ts Type guards + legacy migration
│ ├── geometry.ts Collision, bounds, snap, auto-organize
│ ├── alignment.ts Align/distribute pure functions
│ ├── achievements.ts 15 predicate-based achievements
│ ├── cctv-models.ts Real-world CCTV model specs for cameras
│ ├── persistence.ts Active-layout localStorage I/O
│ ├── library.ts Named-layout library I/O
│ ├── share.ts Share-URL encode/decode (base64url)
│ ├── blueprint.ts Print-friendly 2D blueprint HTML
│ ├── catalog-drag.ts HTML5 drag MIME constants
│ ├── themes.ts Theme definitions + applyTheme
│ ├── furniture-sets.ts Pre-built combos
│ ├── surprise.ts Random one-shot floor populate
│ ├── sounds.ts Web-Audio synth for UI cues
│ ├── wall-snap.ts Vertex + right-angle snap for interior walls
│ ├── opening-snap.ts Door/window snap to wall segments
│ ├── room-shapes.ts Predefined room shape presets
│ └── file-io.ts JSON / image / PNG / CSV / GLB I/O
├── three/ Three.js builders, no React
│ ├── furniture-builders.ts Registry + factory (~110 lines)
│ ├── builder-utils.ts Shared types + helpers
│ ├── builders/ Per-category builder functions
│ │ ├── builders-seating.ts Chair, armchair, bench, sofa
│ │ ├── builders-bedroom.ts Bed, nightstand, dresser
│ │ ├── builders-tables.ts Table, desk, coffee/side/dining
│ │ ├── builders-storage.ts Bookshelf, cabinet
│ │ ├── builders-kitchen.ts Fridge, stove, sink, counter
│ │ ├── builders-bathroom.ts Toilet, bathtub, shower
│ │ ├── builders-electronics.ts TV, computer, WiFi, router, CCTV
│ │ ├── builders-lighting.ts Lamp, pendant, lamppost
│ │ ├── builders-decor.ts Rug, painting, vase, mirror, etc.
│ │ ├── builders-plants.ts Plant, tree, flowers, hedge, etc.
│ │ ├── builders-outdoor.ts Fence, pool, BBQ, mailbox, etc.
│ │ ├── builders-people.ts Person, pet
│ │ └── builders-structure.ts Door, window, stairs
│ ├── room-builder.ts Floor + walls (yOffset, ghosting)
│ ├── wall-openings.ts Door / window → exterior wall cutouts
│ ├── interior-walls.ts Drawn-segment interior walls with cutouts
│ ├── measurement.ts Distance-tool spheres + line
│ ├── item-labels.ts Floating sprite labels above items
│ ├── roof.ts Flat / gable / hipped roof
│ ├── floor-patterns.ts Procedural CanvasTexture floors
│ ├── wall-patterns.ts Procedural CanvasTexture walls
│ ├── signal-overlay.ts Wi-Fi / CCTV ring overlays
│ ├── camera-vision.ts Directional CCTV vision-cone overlays
│ ├── lighting.ts Sun-arc continuous time of day
│ └── outdoor.ts Garden / path / bush scenery
├── canvas-2d/render.ts Pure 2D top-down renderer
├── plotcraft/icon.tsx Lucide-react icon wrapper for UI panels
├── hooks/
│ ├── use-layout-state.ts useReducer + activeFloorIndex
│ ├── use-three-scene.ts Renderer / controls / RAF / drag / hover
│ ├── use-scene-effects.ts 13 useEffects for scene rebuilds
│ ├── use-walkthrough.ts PointerLock + WASD movement
│ ├── use-npcs.ts Animated wandering pedestrians
│ ├── use-camera-presets.ts Iso/top/front/corner + fit + focus
│ ├── use-history.ts Snapshot undo/redo
│ ├── use-achievements.ts Diffed unlock detection
│ ├── use-recent-colors.ts Persisted LRU colour palette
│ ├── use-keyboard-shortcuts.ts Centralised key handling
│ └── use-layout-persistence.ts Hydrate (share → local) + auto-save
└── panels/ Presentation (most use context)
├── lot-badge.tsx Top-left lot name + sidebar toggle
├── sidebar-drawer.tsx Full sidebar with 4-tab panel layout
├── sidebar-tabs.tsx Build / Buy / Style / Manage tabs
├── build-tools-panel.tsx Bottom-left glass panel (categories + mode)
├── catalog-strip.tsx Bottom-centre drag-source tile row
├── mode-panel.tsx Bottom-right LIVE / BUILD / BUY + stats
├── item-context-popover.tsx Floating per-item editor on selection
├── floor-switcher.tsx
├── walls-panel.tsx
├── roof-panel.tsx
├── room-settings-panel.tsx
├── furniture-catalog-panel.tsx
├── placed-items-panel.tsx
├── item-resize-panel.tsx
├── align-panel.tsx
├── templates-panel.tsx
├── themes-panel.tsx
├── library-panel.tsx
├── sets-panel.tsx
├── statistics-panel.tsx
├── header-stats.tsx
├── time-of-day-panel.tsx
├── camera-presets-panel.tsx
├── camera-pad.tsx
├── floor-pill.tsx
├── room-shapes-panel.tsx
├── wall-display-pill.tsx
├── wall-paint-panel.tsx
├── actions-panel.tsx
├── shortcuts-panel.tsx
├── welcome-banner.tsx
├── minimap.tsx
├── achievements-panel.tsx
├── achievement-toast.tsx
└── viewport.tsx