2D/3D apartment configurator Floor Craft
As part of a series of demo solutions for real estate and interior planning, an interactive apartment configurator has been developed in 2D floor plan format (top view).
This solution demonstrates how a modern space design tool can work: the user independently creates an apartment plan, manages rooms, arranges furniture, and configures object parameters directly in the browser.
The constructor is aimed at developers, interior designers, real estate agencies, and housing search platforms.
Technological implementation
The builder is implemented on a modern web stack with an emphasis on speed, smooth interface, and scalability.
- JavaScript – managing editor logic, working with objects and the scene
- HTML/CSS – Interface, Toolbars, and Controls
- PixiJS – used for fast and responsive 2D visualization, working with objects and interactive scenes
- Three.js is responsible for the 3D mode, building a volumetric model, and displaying apartments in space.
Creating a layout
The user can create an apartment plan from scratch or edit an existing one:
- add and remove rooms
- set the dimensions of the rooms
- change shape and position
- customize walls, doors, and windows
Each element is displayed on the diagram and edited in real time.
Working with furniture
The built-in catalog allows you to fill the space with objects:
- sofas, beds, wardrobes
- kitchen modules
- plumbing
- decorative elements
Objects can be:
- move around the stage
- rotate
- duplicate
- delete
- align to grid
Setting object properties
For each selected element, a properties panel is available:
- dimensions (width, height)
- position (X / Y)
- square
- price
- rotation and display layer
- blocking from changes
This allows you to precisely control every detail of the project.
Additional features
The configurator includes tools for more precise work:
- snap to grid
- collision control (intersection of objects)
- calculation of total area
- counting the number of rooms and objects
- formation of the final cost and estimate of the project
Switching to 3D visualization
The configurator supports switching between a 2D floor plan and a 3D visualization. With one click, users can switch from a plan (top view) to a 3D representation of the apartment and see the created layout in space.
The 3D mode is automatically generated based on the collected 2D plan:
- the structure of the premises is preserved
- walls, openings, windows and doors are displayed correctly
- all added furniture is transferred to the scene
- the sizes and proportions of objects are taken into account
In 3D mode the user can:
- view the apartment from different angles
- move around the rooms
- evaluate the scale and layout of space
- better understand what the real interior will look like
This allows us to move from technical planning to visual perception of the project and significantly simplifies decision-making.
What does this demo demonstrate?
The demo project shows how to:
- create an apartment plan in minutes
- visually assemble space without complex programs
- quickly test different layouts
- prepare the base for further design or renovation
The interface is designed so that even a user without experience can easily work with the layout.
Application of the solution
Similar constructors are used in:
- developers' websites
- real estate selection services
- design studios
- furniture companies
- CRM sales systems
An interactive 2D planner simplifies client communication, makes the project visual, and helps speed decision-making.
Other demo projects of 3D solutions are available in this section.
👉 You can find out the estimated cost of developing a full-fledged Apartment Configurator on the service page or through the application form.
