Elamuarenduse 3D-veebilehel on reaalajas hoonemudel peamine vahend kodu leidmiseks ja ostuotsuse tegemiseks. Eraldi renderduste galerii ja hinnatabeli asemel pöörab ostja hoonet, viib kursori aknale ning näeb just selle korteri tubade arvu, pindala, hinda ja staatust. Filtrite rakendamisel jäävad valgustatuks vaid sobivad kodud. Veel valmimata arenduse puhul on see lähim võimalus kogeda tunnet, et seisad valmis hoone ees hämarikus.
Ühtlasi on see teostuselt kõige nõudlikum lahendus.
Miks hoone ise on parim müügivahend
Ostja esimesed küsimused puudutavad ruumi: milline külg on päikese poole, milline vaade avaneb hoovi poolt. Lihtne loend neile ei vasta, hoonemudel aga annab vastused korraga iga kodu kohta.
Suurema osa tööst teevad kolm interaktiivset võtet:
- Koduvalik akna kaudu. Iga aken või rõdu on seotud ühe korteriga. Kursori pealeviimisel või puudutamisel näed tubade arvu, pindala, korteri juurde kuuluvat väliala, hinda ja staatust.
- Vabade korterite esiletõstmine. Üks lüliti muudab müüdud ja broneeritud kodud tumedamaks ning valgustab allesjäänud. Nii annab mudel ilma ühegi reklaamlauseta märku ka pakkumise piiratusest.
- Päevavalgusest hämarikuni. Sama hoone hommikuvalguses aitab mõista ilmakaarte suundi ja vaateid. Hämarikus saab sellest meeleolukas põhipilt.
Meie Tallinna näidisprojekt
Nende ideede katsetamiseks lõime Tallinnasse elamuarenduse näidisprojekti: tööstuspärandit esindava tellishoone, mida kuvatakse hämarikus reaalajas 3D-na. Lahendus sisaldab järgmist:
| Funktsioon | Mida see teeb |
|---|---|
| Iga aken on üks kodu | Kohtspikker kursori pealeviimisel: toad, pindala, väliala, hind ja staatus |
| „Tõsta vabad korterid esile“ | Lüliti, mis valgustab ainult müümata kodud |
| Hoone külje valik | Vali hoone külg; all olev filtreeritav tabel muutub selle järgi |
| Lähiümbrus: jalgsikäigu aeg minutites | Igapäevaste sihtkohtade kaugus jalgsikäigu minutites, mitte omadussõnades |
| 5-etapiline ehitusajakava | Ehitusloast üleandmiseni, et ostja näeks, millises etapis projekt on |
| Müügipäringu vorm | Tubade arvu valik ja hinnaliugur; valitud kodu on vormis juba kirjas |
| Varulahendus väiksema jõudlusega telefonidele | Reaalajas mudeli asemel näidatakse eelrenderdatud kordusvideot |
See on näidisprojekt, mitte turule toodud elamuarendus, seega pole meil tulemusi, mida esitada. Näide näitab, kuidas muutuvad interaktiivse korterivalija osad, kui staatilise renderduse asemel kasutatakse reaalajas 3D-stseeni.
Mida on vaja elamuarenduse 3D-visualiseerimiseks
Mudel
Alusta arhitekti CAD- või BIM-mudelist ja kohanda see veebi jaoks. Ehitusmudel on liiga mahukas: jäta alles fassaad, aknad, rõdud ja lihtsustatud krunt ning kanna detailid tekstuuridesse. Valmis mudel antakse tavaliselt üle veebipõhise 3D standardvormingus glTF. Geomeetria tihendamiseks kasutatakse Dracot ja tekstuuride jaoks KTX2/Basist.
Iga aken või rõdu on eraldi mudeliobjekt, mille nimi on korteri ID. Just see üks kokkulepe võimaldab valida kodu akna kaudu.
Andmed
Hindu mudelis ei hoita. Veebileht laadib töötamise ajal korterite tabeli CRM-ist, headless CMS-ist või ühisest arvutustabelist, seob korterite ID-d mudeliobjektidega ning värvib need staatuse järgi. Kui müügimeeskond broneerib kodu, muutub hoone järgmise laadimise ajal.
Valgus
Ülemineku päevast hämarikku saab luua kahe eelarvutatud valgusvariandi ja nende segamisega või kasutada reaalajas valgustust. Eelarvutatud valgus koormab telefoni vähem ja annab etteaimatavama tulemuse, reaalajas valgus on paindlikum päikesevalguse analüüsimiseks. Meie arvutame valguse tavaliselt ette.
Kuidas tagada interaktiivse 3D-hoonemudeli kiire töö
3D koormab seadet ja telefonides on see eriti tuntav. Utsubo märgib, et minimeeritud Three.js-i tuum on umbes 600 KB juba enne stseeni koodi lisamist. Abimoodulid, järeltöötlus ja mudel võivad mahu viia üle 3 MB. Google’i hea LCP piir on 2,5 s või vähem (web.dev).
Meie teeme nii:
- HTML kõigepealt. Pealkiri, hinnad, saadavus ja korterite loend kuvatakse tavalise HTML-ina enne 3D käivitumist. Utsubo soovitab „saata leht HTML-ina ja käivitada canvas hiljem“.
- Staatiline avakaader. Esmalt kuvatakse hoone pilt hämarikus ja see on ka LCP element.
- Laadime stseeni hiljem, pärast lehe esmast kuvamist ja ainult siis, kui avavaade on nähtaval.
- Kontrollime seadet ja valime sobiva varulahenduse. Väiksema jõudlusega telefonides näitame eelrenderdatud kordusvideot ja 2D-korterivalijat fassaadil, kasutades samu andmeid. Keegi ei näe mudeli asemel tühja ala.
- Määrame stseenile piirid. Piirame mudeli mahtu, tekstuuride mälukasutust ja joonistuskutsete arvu ning testime tulemust keskklassi Android-telefonis, mitte stuudio sülearvutis.
Täieliku kontrollnimekirja leiad artiklist „3D-veebilehe jõudlus“.
Millal tasub elamuarendusele 3D-veebileht teha
| Olukord | Meie hinnang |
|---|---|
| Müük enne valmimist, vähemalt 40 kodu, silmapaistev arhitektuur | Jah, sama mudelit kasutatakse veebis, müügiesinduses ja videos |
| Ajalooline või märgilise tähtsusega hoone | Jah, hoone ise annab loole sisu |
| Alla 15 kodu, lihtne hoone | Pigem mitte, heast renderdusel põhinevast korterivalijast piisab |
| Puudub usaldusväärne hinnakiri või staatuste haldamise kord | Tee esmalt need asjad korda: aegunud andmetega 3D on halvem kui 3D puudumine |
Ükskõik millise lahenduse valid, lisandub 3D-kiht terviklikule elamuarenduse veebilehele. Plaanid, asukoht, ehituse edenemine ja kontakt peavad toimima ka ilma selleta.
