websites_open

Gabinet – planer pokoju 3D (biuro + gościnna sypialnia)

Study & guest room – 3D room layout planner

Interaktywny model 3D małego pokoju (3,44 × 3,58 m, wysokość 2,83 m), który ma być jednocześnie gabinetem do pracy i rysowania oraz pokojem gościnnym. Strona porównuje 15 układów – po 5 dla każdego rodzaju łóżka (stałe, składane do ściany, rozkładana sofa) – w dwóch wariantach biurka. Model można obracać, przełączać tryb dzień/noc (łóżko złożone/rozłożone), włączać gniazdka i wymiary (w modelu stoi też monstera właściciela) oraz pobrać plan pokoju w PDF i DXF dla architektów. Dla każdego układu liczona jest wolna podłoga, najwęższe przejście i pojemność półek, a kolizje mebli są sprawdzane automatycznie. Odrzucone wersje projektu są dostępne w zakładce „Odrzucone”.

An interactive 3D model of a small room (3.44 × 3.58 m, 2.83 m high) that has to work both as a home study for desk work and drawing and as a guest bedroom. The page compares 15 layouts – five for each bed type (fixed bed, wall-folding bed, sofa bed) – with two desk variants. You can orbit the model, switch day/night mode (bed folded/unfolded), toggle outlets and dimensions (the owner’s monstera is part of the model), and download the room plan as PDF and DXF for architects. For every layout the page computes free floor area, narrowest passage and shelf capacity, and checks furniture collisions automatically. Rejected design versions are kept in the “Odrzucone” (Rejected) tab.

Jak powstała

How it was made

• Dane wejściowe: odręczny szkic pokoju z wymiarami (PDF), skan LiDAR z aplikacji Polycam (GLB), 18 zdjęć z iPhone’a.
• Położenie gniazdek i włączników pochodzi z pomiarów taśmą właściciela (elementy 85×85 mm); plan pokoju (PDF + DXF) jest generowany skryptem z tej samej geometrii.
• Porównałem skan ze szkicem (przekroje siatki na różnych wysokościach) – zgodność do ok. 2 cm. Z renderów ścian modelu i ze zdjęć odczytałem okno, parapet, grzejnik, drzwi i orientacyjne położenie gniazdek.
• Zbudowałem parametryczny model pokoju oraz model danych układów (meble jako prostokąty z wysokościami) i walidator: kolizje, strefy otwierania drzwi, siatkowe wyznaczanie przejść i wolnej podłogi.
• Widok 3D, interfejs i animacje (składanie łóżka, wsuwane krzesło) napisałem w three.js i spakowałem do jednego pliku HTML.
• Projekt powstawał iteracyjnie, w rozmowie z właścicielem pokoju: 4 wersje, każda zmiana wymagań (biurko L, łóżko 140, szafa, sofa jak na zdjęciu, blat zlicowany) kończyła się nową wersją; poprzednie są w archiwum.
• Testy: automatyczne zrzuty ekranu w bezgłowej przeglądarce i kontrola błędów konsoli po każdej zmianie.

• Inputs: a hand-drawn dimensioned sketch of the room (PDF), a LiDAR scan from the Polycam app (GLB), and 18 iPhone photos.
• Outlet and switch positions come from the owner’s tape measurements (85×85 mm elements); the room plan (PDF + DXF) is generated from the same geometry with a script.
• I compared the scan with the sketch (mesh slices at several heights) – they agree to about 2 cm. From rendered wall elevations of the model and from the photos I read off the window, sill, radiator, door and approximate outlet positions.
• I built a parametric room model, a layout data model (furniture as rectangles with heights) and a validator: collisions, door-swing zones, grid-based passage width and free floor area.
• The 3D view, UI and animations (folding bed, tucked-in chair) are written in three.js and bundled into a single HTML file.
• The design evolved iteratively with the room’s owner: 4 versions, each change of requirements (L-shaped desk, 140 cm bed, wardrobe, sofa bed as in the reference photo, flush worktops) produced a new version; earlier ones are archived.
• Testing: automated screenshots in a headless browser and console-error checks after every change.

Użyte narzędzia

Tools used

• Claude (Anthropic, Claude Sonnet 5.5) in Claude Code – projekt, kod, analiza danych, testydesign, code, data analysis, testing
• three.js 0.160 (WebGL, OrbitControls, CSS2DRenderer) + esbuild – widok 3D i pakowanie do jednego pliku3D view and single-file bundling
• Node.js – walidator układówlayout validator
• Python (Pillow, pillow-heif, trimesh, NumPy, Matplotlib, ezdxf) + poppler – konwersja zdjęć HEIC, analiza skanu GLB, odczyt szkicu PDF, generowanie PDF i DXFHEIC photo conversion, GLB scan analysis, reading the PDF sketch, generating the PDF and DXF
• Playwright + headless Chromium – renderowanie ścian modelu i testy wizualnerendering model elevations and visual tests
• Polycam (LiDAR) orazand iPhone – skan pokoju i zdjęciaroom scan and photos

Uwaga: wymiary i położenie gniazdek pochodzą z pomiarów właściciela (wysokość G3 jest przyjęta; parapet, grzejnik i wysokość drzwi pochodzą ze skanu), a przejścia liczone są zachowawczo. To narzędzie do porównywania pomysłów, nie dokumentacja wykonawcza. Pełny opis i kod źródłowy: gabinet/README.md.

Note: dimensions and outlet positions come from the owner’s measurements (G3’s height is assumed; window sill, radiator and door height come from the scan), and passage widths are computed conservatively. This is a tool for comparing ideas, not construction documentation. Full write-up and source code: gabinet/README.md.