Browser-based 3D floor planner — design rooms, place furniture, and export your layout. No download required.
BuildSphere lets you design a floor plan in your browser using a fully interactive 3D scene. Drop walls, add doors and windows, furnish rooms, and finalize with a roof — all without leaving the browser.
| Feature | Details |
|---|---|
| Wall tool | Click to place wall segments; snaps to grid |
| Openings | Add windows and doors with precise placement |
| Furniture | Drag-and-drop placement with move/rotate handles |
| Roof | Auto-positioned at wall height with configurable pitch |
| Resize | Context-menu resize with width/length presets |
| Materials | Per-element material selection (wood, concrete, glass, etc.) |
| Save / Load | JSON export/import to preserve your design |
| Undo / Redo | Full history stack (Ctrl+Z / Ctrl+Shift+Z) |
| Orbit camera | Pan, zoom, rotate freely around the scene |
git clone https://github.com/amarjaleelbanbhan/BuildSphere
cd BuildSphere
npm install
npm run dev
# open http://localhost:3000Requires Node.js 18+.
- Next.js 15 — routing and SSR shell
- React Three Fiber — declarative Three.js scene management
- Three.js — 3D rendering engine (WebGL)
- Zustand — client-side scene state (tools, history, object registry)
- TypeScript — full type safety across components and store
| Action | How |
|---|---|
| Orbit camera | Right-click drag |
| Pan | Middle-click drag |
| Zoom | Scroll wheel |
| Place object | Left-click in scene |
| Select / move | Left-click on object, drag |
| Rotate | R key while selected |
| Delete | Delete key while selected |
| Undo | Ctrl+Z |
| Redo | Ctrl+Shift+Z |
- PNG/SVG floor plan export
- Multi-floor support
- Collaborative editing via WebSocket
- Measurement annotations
- Texture upload for custom materials
MIT © Amar Jaleel