Dům v prohlížeči
Interaktivní 3D model, na kterém se učím pracovat s 3D na webu.
Přehled
Osobní projekt po večerech: model domu, kterým se dá projít přímo v prohlížeči. Geometrie, interiér i zahrada vycházejí ze společného datového modelu. Předlohou je dům, který si stavím, ale projekt je hlavně o tom, co se na něm naučím.
Rozsah
- Interaktivní 3D model v prohlížeči
- Datový model geometrie a rozměrů
- Interiér, kolize a průchod prostorem
- Vizualizace v Blenderu
01 /Kontext
Tenhle projekt vznikl jako cvičení. Chtěl jsem si vyzkoušet, co všechno unese 3D scéna v prohlížeči, a potřeboval jsem k tomu zadání, které dobře znám — dům, na kterém zároveň pracuji.
Není to zakázka ani produkt. Je to místo, kde si můžu zkoušet věci bez klienta a bez termínu, a proto se na něm naučím nejvíc.
02 /Moje role a zodpovědnost
Model i celou webovou scénu vyvíjím sám. Řeším geometrii, materiály, ovládání kamery, průchod interiérem i velikost dat, se kterou se scéna ještě rozumně načte.
Předlohou je dům, který si stavím, takže pracuji se skutečnými rozměry. Model se pak vrací zpátky do návrhu — pomáhá mi přemýšlet o prostoru a souvislostech mezi jeho částmi.
03 /Klíčová rozhodnutí
Prostor, kterým se dá projít
Model se dá otočit, proletět nebo do něj vejít. Má interiér, ovladatelné dveře a kolize, takže si prostor zkouším i z pohledu člověka, který jím prochází.
Jeden datový model
Geometrie, rozměry a technické pohledy vycházejí ze stejných dat. Změna na jednom místě se propíše do celé scény, místo aby se ručně dohledávala.
Cvičiště bez termínu
Projekt záměrně nemá klienta ani deadline. Můžu v něm zkoušet postupy, které bych v placené práci nasazoval opatrněji, a dál si odnést jen to ověřené.
04 /Architektura
Interaktivní model vyvíjím v TypeScriptu s Babylon.js. Geometrie, rozměry a technické pohledy vycházejí ze společného datového modelu.
Na webovou scénu navazuje Blender a Cycles pro vizualizace. Připravené 3D modely a materiály se vracejí do prohlížeče, kde zůstává zachované otáčení, přelet i chůze interiérem.
05 /Technologie
Babylon.js, TypeScript, React, Blender, Cycles, glTF
06 /Výsledek
Model se dá projít přímo v prohlížeči: otáčení, přelet i chůze interiérem a po zahradě. Odkaz vede vždy k jeho aktuálně publikované podobě.
Pořád na něm pracuji. To, co se na něm naučím o 3D na webu, o výkonu a o práci s daty, používám i mimo tenhle projekt.