Custom Furniture Builde

Challenge

One of the core challenges was creating a flexible and user-friendly furniture builder that allowed customers to customize furniture components with precision, while maintaining a smooth and responsive 3D experience within a browser environment.

Customization requirements included:

Modifying furniture structures, such as adding or removing modular parts (e.g., sofa sections, shelving units).
Changing materials and finishes (wood types, fabrics, colors).
Adding or adjusting furniture accessories, like legs for sofas, handles for cabinets, or additional panels.
Ensuring each piece respected design rules and manufacturing constraints to avoid invalid configurations.

An additional complexity stemmed from the source models. Customers provided high-quality 3D models of furniture, often without optimization for web-based interactive applications or modular use. Integrating these assets into a customizable system required a thoughtful approach.

Solution

To address these challenges, we implemented a snap-based modular system, alongside a robust asset management and interaction pipeline.

We developed a snap socket mechanism, where each furniture model was augmented with manually placed snapping points. These sockets defined exactly where and how components could connect, allowing for precise control over modular configurations.

Each snap socket included metadata specifying compatible parts, alignment rules, and connection types (e.g., rotational alignment, mirrored components).
This system ensured users could only connect compatible pieces, maintaining logical design flow and structural integrity for manufacturing.

Integrated a material swapping system within Three.js that allowed real-time changes of textures and materials, giving users immediate visual feedback on their design choices.

Materials were optimized using PBR (Physically Based Rendering) workflows to balance visual fidelity and performance.
An asset management system ensured efficient loading of texture maps, minimizing load times and memory usage.

Imported customer-supplied models were processed to:

Reduce polygon counts where possible, preserving essential details while optimizing for web performance.
Normalize model scales, pivots, and orientations to ensure seamless snapping and placement within the scene.
Prepare LODs (Level of Details) for better performance on lower-end devices.

Result

These logic led to smooth customer experience of creating and modifying furniture

Room Design & Customization

Challenge

The core challenge involved implementing dynamic room resizing, particularly ensuring that all visual and functional elements adjusted correctly as users modified room dimensions in real time.

One specific issue was with the floor shaders and textures:

When users resized the room, the floor textures and normals stretched incorrectly, causing visual artifacts and loss of material fidelity.
The normals used for lighting and shading were not updating relative to the new room proportions, leading to unrealistic reflections and shading.
Additionally, UV mapping on the floor materials was not scaling appropriately, which made floor surfaces look distorted or blurry when the room size changed.

This issue broke immersion and undermined the professional, polished feel the tool was aiming for.

Solution

To resolve these issues, I implemented a system that dynamically adjusted both the floor shaders and UV mapping whenever the room size was modified.

Refactored the floor shader in Three.js to account for changes in room scale without stretching the normals or textures.

The shader recalculated tangent space normals in real time, ensuring accurate lighting regardless of floor size.
Implemented world-aligned texture mapping to prevent texture distortion—textures were projected based on world coordinates instead of local UVs, maintaining consistent texel density as the room expanded or contracted.
Added support for triplanar mapping techniques in areas where traditional UV mapping failed to deliver the desired fidelity.

Developed a UV tiling system that automatically adjusted texture scale based on the dimensions of the floor plane.

This ensured that materials like wood flooring or tiles maintained consistent appearance without stretching, regardless of room size.
Provided users with manual control to override tiling settings, enabling them to fine-tune material appearances if desired.

Built an intuitive UI in React that allowed users to drag handles or input specific dimensions to resize their room.

As users adjusted the dimensions, the underlying Three.js scene updated instantly, with floor materials and lighting recalculating on the fly for a seamless experience.
Snapping features and measurement guides were included to help users design rooms with accuracy and ease.

Optimized the system to ensure real-time updates without sacrificing performance. Efficient shader code, geometry updates, and lightweight computations kept frame rates high, even on lower-end devices.

Result

These improvements delivered a highly responsive and polished room design system, where users could:

Resize their rooms dynamically without compromising the visual quality of materials or lighting.
Maintain consistent material fidelity, ensuring wood grains, tiles, and other floor finishes always appeared correctly scaled and professionally rendered.
Achieve realistic and immersive previews of their custom room layouts before adding furniture or submitting designs for manufacturing. This level of control and visual accuracy greatly enhanced the user experience, reinforcing the platform’s goal of bridging creativity and practical design.

Internal Camera Tool for Marketing & Advertisement

Purpose

While not exposed to end users, this tool provided a valuable workflow enhancement for internal teams, allowing them to quickly generate polished, on-brand visuals without relying on external 3D software or manual scene recreation.

Solution

The internal camera system was implemented in Three.js, integrated seamlessly into the existing React interface of the editor. The tool was straightforward but effective, offering a simple UI and intuitive controls that enabled non-technical team members to create compelling visuals with minimal training.

Key features included:

The ability to add and position multiple cameras in the scene, allowing for predefined camera angles to be set up in advance.
A camera selection panel, which allowed users to snap the viewport to any preset camera’s position and orientation for framing the perfect shot.
Customizable field of view (FOV) and camera lens settings, so shots could be tailored for wide-angle room overviews or close-ups on specific furniture details.
Integration with the lighting system, enabling the team to adjust environmental lighting or add custom light sources to enhance scene presentation prior to capturing screenshots.
A screenshot capture tool that exported high-resolution images directly from the WebGL canvas, ensuring crisp visuals suitable for marketing use.

Challenges

The camera tool itself did not pose significant technical challenges, as it primarily involved leveraging Three.js’s existing camera system and adding UI controls to manage camera placement and viewport snapping. However, ensuring that the tool was user-friendly and efficient for non-technical staff was a key focus during implementation.

Result

The internal camera system streamlined the process of producing marketing assets, saving time for both the development and marketing teams. It allowed the company to quickly generate consistent, high-quality images that showcased room designs and furniture in the best possible way, contributing to professional marketing materials without requiring external tools or post-processing.

All projects

Case study

Room planner

The goal is to create an app which allows people to customize/place furniture, to preview how it would look in a room and provide this info to the manufacturer.

Three.js
React
Js

Start of development:: 2022
I am in the project:: 2022-23

Contribution to project

Creation of furniture movement
Camera Movement
Funiture Combiner

So we worked on MVP to showcase to investores

A team decided to make an MVP of room planner application, to showcase it to potential clients and I was invited to help out

Furniture or Lego?Make furniture pieces attach to each other in order to allow customer to customize furniture as much as they wantRead more

A Room to your tasteDue to making room creation as intuitive as possible Read more

Internal designer toolsDue to creation of cameras and ability to manipulate these camerasRead more

Project put on hold

Unfortunatly project was put on hold till further notice
To be continued

All projectsLet’s talk