Demo · my own product

Plan a new bathroom in 3D — from a few phone photos

Take photos of the old bathroom; AI reads the layout, proportions and where water and drains are, and the planner builds the renovated room in 3D. Then move, swap and restyle everything.

Bad 3D: 3D view of a bathroom with toilet, vanity and shower

Designed, coded and shipped by Andrii Lynnyk

This is my development: product research, UX, every 3D model, the tile engine, the AI pipeline and the server endpoints — idea to production in October 2026. The only third-party library in the browser is three.js (MIT).

The same code runs in production for a Danish bathroom renovation company at badova.dk/planner/. This demo uses that production server for the AI steps (with its daily limits); sending a request to the company is switched off here.

· github.com/andrey-tut

4 600+lines of own JavaScript
16parametric fixture types, many variants
60+tiles, floors and paints, true to size
1library: three.js — no CDN, works offline

What it does

Photos → renovated 3D room

Guided capture or upload. AI finds walls, doors, windows and plumbing points; scale comes from standard-size objects (doors, toilets, tiles), median over several.

Own parametric 3D models

Wall-hung toilet with concealed cistern, vanities 60–120 cm, mirrors with LED glow, showers with glass and thermostat, bathtubs, towel rails, washer — all generated in code.

Real tiles, real sizes

Procedural tiles in centimetres with grout and relief, herringbone and offset patterns, tiling height: full wall, 120 cm or shower zone only.

Smart placement

Snap to walls and corners, strict collision rules, door swing and service clearances, drag from the catalogue with a green/red ghost.

3D, 2D and eye level

Doll-house 3D with cut-away walls, a measured 2D plan and a first-person view. Undo/redo, autosave and a share link with the whole design.

AI photo of the design

One click turns the current 3D view into a photorealistic mood image with a before/after slider. Works on phones as an installable PWA.

Screenshots

Mobile
Phone: bottom sheet, touch placement
Start from photos
Start from photos — step by step