#

Play Video

#

demo-app-bg-1 demo-app-bg-2 demo-app-bg-3 demo-app-bg-4 demo-app-bg-5 demo-app-bg-6

3D interior constructor

As part of a series of demonstration solutions, the AVADA MEDIA team developed an interactive online 3D interior constructor.

This demo shows how a user can create a space from scratch directly in the browser: define the room's geometry, customize the walls and floor, add furniture, doors, and windows, and control the lighting.

The solution combines the functions of a planner, visualizer, and calculation tool, allowing you to create not just a design, but a complete project with parameters and cost.

# #
Information

Technologies
Three.js
WebGL
Vue.js
HTML
CSS
JavaScript
3D interior constructor online, demo of creating a house plan with furniture
Click to view

Demonstration scenario

For clarity, a demo project example has been created and saved – a one-room apartment with a finished layout, furniture, and cost estimate.

The user can use it as a basis for exploring the capabilities of the constructor or completely modify it to suit their needs.

Project flexibility and scalability

The constructor does not limit the user to one scenario.

The user can:

  • clear the stage completely
  • create a space from scratch
  • design apartments, houses or commercial spaces
  • specify any number of rooms
  • change geometry and layout
  • add any objects and furniture from the catalog

Thus, the demo demonstrates only one example, while the tool itself allows you to create projects of any complexity.

Technologies

  • Three.js / WebGL – Real-Time 3D Visualization
  • TypeScript – Constructor Logic and State Management
  • Vue.js – Interface and User Interaction

Technological implementation

The constructor is built as a modular system with real-time control of all scene elements.

The architecture allows the solution to be scaled to meet real business challenges:

  • connecting furniture and materials catalogs
  • integration with CRM/ERP
  • integration with CAD systems
  • preparation of data for procurement and construction

As a result, the user creates a complete project, ready for further work.

Demo functionality

The constructor allows you to work with all the key elements of space:

Room geometry

  • creating walls (straight / arc)
  • height and thickness adjustment
  • changing the shape of the room
  • working with segments

Floor and surfaces

  • creating and editing a floor
  • choice of color and materials
  • application of textures (wood, tile, stone)
  • adjusting texture direction

Objects and furniture

  • adding doors and windows
  • placement of furniture (sofas, tables, chairs, etc.)
  • drag & drop placement of objects
  • setting up element parameters

Lighting

  • setting up diffuse light
  • directional light control (sun)
  • adjusting intensity and color
  • adding fill light

Points and navigation

  • setting viewpoints
  • quick transition between zones
  • camera settings

User interaction

The user can:

  • create and edit a room from scratch
  • work with objects using drag & drop
  • rotate and move the camera
  • edit scene elements in real time
  • use snaps and grid
  • undo and redo actions
  • clear the stage
  • save and load projects
  • get an estimate for the selected items

The interface is based on the principles of professional 3D tools, but is simplified and adapted for quick learning.

3D room planner, creating walls and zoning interior online
3D interior furniture configurator, placing objects in room online
3D interior online, adding view points in room planner

Estimate and cost calculation

The constructor has a built-in calculation module that automatically generates an estimate based on the created project.

The system takes into account:

  • walls – area and cost per m²
  • floor – materials and area
  • furniture and objects – with fixed prices
  • doors and windows – taking into account the quantity

The calculation is performed in real time and is updated whenever the scene changes.

The user receives:

  • detailed estimate by category
  • the final cost of the project
  • transparent calculation structure

Additionally available:

  • Exporting estimates to Excel
  • formation of a commercial proposal
  • data transfer to CRM
3D house configurator, cost calculation of renovation and materials, CPQ
Online 3D interior constructor, furnishing rooms and design selection

Practical application

The solution is suitable for:

  • interior designers
  • construction companies
  • developers
  • furniture brands
  • e-commerce platforms
AI interior visualization, generating photorealistic bedroom design
AI kitchen render online, transforming 3D model into realistic interior
AI bathroom design, photorealistic interior visualization

What does this give to business?

  • a full-fledged tool for visualizing a project before implementation
  • speeding up approvals with the client
  • reducing the number of edits
  • automation of calculations
  • increasing conversion

This is no longer just a visualization, but a full-fledged system for sales and design.

3D interior constructor online, AI visualization and design configurator
AI 3D interior configurator, room design, furnishing and online rendering
3D room planner, creating walls and zoning interior online, AI visualization

Other demo projects of 3D solutions are available in this section.

👉 You can find out the estimated cost of developing a full-fledged apartment constructor on the service page or through the application form.

Hello!👋 Contact us 😀