Naqsha se Ghar
A house planner that turns a 2D floor plan into a multi-storey 3D house, in Roman Urdu, right in the browser.
The problem
People planning a house usually start from a paper sketch, and it is hard to picture the rooms, floors and an odd-shaped plot in three dimensions before talking to a builder.
The approach
Naqsha se Ghar turns a floor plan into a live 3D house. Users can draw their own plan, or describe their plot and requirements to generate a starting layout, then adjust rooms, floors and colours.
How it is built
React drives the editor, while Three.js builds the house from a shared plan model, including wall openings, stairs, landings and roof slabs. The generator clips layouts to polygon plots. Firebase Authentication and Firestore store each user's saved designs, and Firebase Hosting serves the installable PWA.
My role
Full development of Naqsha se Ghar.
Delivered functionality
A published web application that turns floor plans into multi-storey 3D houses, with plan generation, editing, colours and cloud saving, installable on desktop and Android.
What the project does
- Draw rooms, walls, doors, windows and stairs on a 1 ft grid, including angled walls and irregular shapes.
- A live 3D model beside the plan, with an orbit view and an eye-level walk-through mode.
- Multi-storey houses with turning stairs and landings; the roof slab is added once a floor's design is marked complete.
- Automatic plan generator from plot size or a custom plot shape (side lengths and angles, or drawn by hand) plus bedrooms, attached baths, kitchen, drawing room, car porch, lawn and courtyard.
- Room naming and resizing by dragging walls, with live room sizes and covered area in square feet and marla.
- Colour themes and manual colours for outer and inner walls, doors, windows, floors, roof and individual rooms.
- Designing works without an account; saving uses Google sign-in with Firestore.
- Installable PWA for desktop and Android with image, 3D model (.glb) and plan file export; the app version adds AR preview, photo tracing and sharing.
Inside Naqsha se Ghar
10 SCREENSHOTSScreenshots show the live website in a desktop browser and at phone width, using the built-in sample house and a plan generated for a corner-cut plot. The generator produces a starting layout, not an architectural or structural drawing.