3D termékbemutató
Körbeforgatható, nagyítható termék valósághű anyagokkal. Ott hasznos, ahol a forma, a felület vagy a méretarány számít: bútor, gép, csomagolás, elektronika.
3D weboldal készítés
3D weboldal készítés, amely gyorsan betölt és el is ad.
A 3D weboldal készítés nem csak modell beágyazása. A jó eredményhez tervezett jelenet, optimalizált asset pipeline és átgondolt felhasználói út kell. A jobb oldali termékbemutató nem kép, hanem élő Three.js jelenet: fogd meg és forgasd körbe.
Áttekintés
3D weboldal készítés: a canvas csak a jéghegy csúcsa
A fenti demó néhány tucat kilobájtnyi saját kód és a Three.js könyvtár, amely csak akkor töltődik be, amikor a jelenet a képernyő közelébe ér. Addig egy statikus poszterkép áll a helyén, így az oldal első megjelenése ugyanolyan gyors marad, mint egy hagyományos weboldalé. Ez a szemlélet minden 3D webes projektünk alapja: a látvány nem mehet a sebesség és a használhatóság rovására.
3D weboldal készítésénél a cél nem pusztán a látványos megjelenés. A 3D elem akkor működik jól, ha segít megérteni egy terméket, erősíti a márka minőségérzetét, vagy olyan interakciót ad, amelyet statikus képpel nehéz lenne elérni. Ehhez a jelenettervezés, az assetek előkészítése, a betöltési stratégia és a mobilos tartalék megoldás ugyanúgy hozzátartozik, mint maga a WebGL-fejlesztés.
Felhasználási módok
Mire használható egy 3D weboldal?
A 3D akkor éri meg, ha olyan kérdésre ad választ, amelyre egy fotó vagy egy bekezdés nem tud. Ez a négy forgatókönyv fordul elő a leggyakrabban.
Termékkonfigurátor
Szín, anyag, kiegészítők vagy méret váltása valós időben, akár árkalkulációval összekötve. A látogató azt látja, amit ténylegesen megrendel.
Scroll-vezérelt történet
A görgetés irányítja a kamerát és az animációt, így egy összetett működés vagy folyamat lépésről lépésre bontakozik ki. Ehhez Three.js-t és GSAP ScrollTriggert használunk.
Adatvizualizáció
Térbeli adatok, városrészek, épületek vagy hálózatok interaktív megjelenítése, ahol a harmadik dimenzió valódi információt hordoz.
Asset pipeline
Jelenet és asset pipeline: a modelltől a böngészőig
A legtöbb lassú 3D weboldal nem a kód, hanem a túlméretezett assetek miatt lassú. Egy gyártói CAD-modell vagy egy rendereléshez készült Blender-jelenet több százezer, akár több millió háromszögből és nagy felbontású textúrákból áll. Ezt böngészőben, mobilon is folyamatosan kirajzolni nem reális, ezért a modelleket webre készítjük elő:
- glTF / GLB formátum: a webes 3D szabványa, amely a geometriát, az anyagokat, a textúrákat és az animációkat egyetlen, gyorsan feldolgozható fájlban tárolja.
- Geometria-tömörítés Draco vagy Meshopt eljárással: a modell fájlmérete jellemzően töredékére csökken, a böngésző pedig gyorsan kicsomagolja.
- KTX2 (Basis Universal) textúrák: a textúrák tömörítve maradnak a videokártya memóriájában is, ami mobilon sokkal kisebb memóriaterhelést jelent, mint a PNG vagy a JPEG.
- Retopológia és bake-elés: a finom részleteket normal mapbe sütjük, így a modell kevés háromszöggel is részletesnek hat.
A jelenet felépítését is a teljesítményhez igazítjuk: a fényeket és az árnyékokat ahol lehet, előre kiszámítjuk, környezeti térképpel (HDRI) adunk valósághű tükröződést, és a draw call-ok számát az anyagok és a geometriák összevonásával tartjuk alacsonyan.
Teljesítmény
Teljesítménykeret 3D weboldalakhoz
Minden projekt elején rögzítünk egy teljesítménykeretet. Az alábbi értékek irányelvek, amelyeket a konkrét tartalomhoz és célközönséghez igazítunk.
Háromszögszám és textúraméret
Egy hero jelenetnél vagy termékforgatónál általában néhány tízezer, legfeljebb nagyjából százezer háromszöggel számolunk. A textúrák mobilon jellemzően 1024 px-esek, asztali gépen indokolt esetben 2048 px-esek, KTX2 formátumban.
JavaScript-súly és kódfelosztás
A Three.js magja tömörítve is több száz kilobájt, ezért külön csomagba kerül, és csak azon az oldalon töltődik be, ahol 3D jelenet van. A többi aloldal JavaScript-terhelése így nem nő.
LCP poszterképpel
A legnagyobb tartalmi elem (LCP) egy optimalizált WebP poszter, nem a canvas. A 3D jelenet később, a böngésző tétlen idejében töltődik be, és csak az első kirajzolt képkocka után úszik be a poszter fölé.
A renderelés sem fut feleslegesen: ha a jelenet kikerül a képből vagy a böngészőfül háttérbe kerül, a képkockák számítása leáll. A pixelsűrűséget legfeljebb kétszeres értékre korlátozzuk, mert a nagy felbontású telefonkijelzőkön a háromszoros felbontás alig látható különbségért sokszoros GPU-terhelést okozna.
Mobil és hozzáférhetőség
Mobilos tartalék megoldás, akadálymentesség és csökkentett mozgás
Egy 3D weboldalnak akkor is működnie kell, ha a 3D éppen nem fut. A tartalom és a navigáció ezért sosem függ a WebGL-től.
Mobilos tartalék megoldás
Gyengébb eszközön egyszerűsített jelenetet, kisebb textúrákat vagy statikus képet mutatunk. Az érintéses vezérlésnél ügyelünk arra, hogy a függőleges görgetés ne akadjon el a canvasban.
Csökkentett mozgás
Ha a látogató az operációs rendszerben a csökkentett mozgást választotta, a WebGL be sem töltődik, és az animációk helyett nyugodt, statikus nézetet kap.
Akadálymentes leírások
A canvas a képernyőolvasók számára nem értelmezhető, ezért a poszterkép alternatív szövege, a képaláírás és a környező HTML-tartalom írja le, mit lát a látogató.
SEO
SEO 3D oldalakon: ami a canvasban van, azt a Google nem olvassa
A keresőmotorok a HTML-t indexelik, nem a WebGL jelenetet. Egy olyan 3D weboldal, amely minden információt a canvasba zár, gyakorlatilag üres a Google számára. Ezért a 3D elemet mindig valódi tartalomba ágyazzuk: szöveges címsorok, termékleírások, műszaki adatok és belső linkek maradnak az oldalon, a jelenet ezeket illusztrálja.
A technikai SEO is számít: a statikusan generált HTML azonnal olvasható, a poszterkép kapjon leíró alternatív szöveget, és a Core Web Vitals mutatók ne romoljanak a 3D miatt. Ez az oldal is így épül fel: a szöveget statikus HTML-ként kapod meg, a demó pedig csak utólag, kiegészítésként töltődik be.
Referencia
Referencia: Bayern Innovative – Stadt der Zukunft
A bajor állami innovációs ügynökség számára készült Stadt der Zukunft interaktív 3D prezentációs oldal jól mutatja, hogyan dolgozik együtt a jelenettervezés és a teljesítmény. Az oldal összetett Three.js jeleneteket, animált adatvizualizációt és scroll-vezérelt navigációt ötvöz GSAP-pel, miközben a tartalom végig követhető marad.
További 3D-s projektjeinket – termékbemutatókat, scroll-vezérelt kampányoldalakat és böngészőben futó 3D tereket – a munkáink között találod.
Folyamat
Így készül egy 3D weboldal lépésről lépésre
Koncepció és jelenetterv
Meghatározzuk, milyen szerepe legyen a 3D elemnek: hero élmény, termékbemutató, konfigurátor vagy scroll-vezérelt történet, és mi jelenjen meg tartalékként.
Modellek és textúrák optimalizálása
Retopológia, bake-elés, GLB export, Draco- vagy Meshopt-tömörítés és KTX2 textúrák, a rögzített teljesítménykeret szerint.
Three.js fejlesztés és integráció
A jelenet, az interakciók és a GSAP animációk beépítése reszponzív, statikusan generált oldalszerkezetbe, lusta betöltéssel.
Mérés és finomhangolás
Tesztelés valódi mobileszközökön, Core Web Vitals mérés, csökkentett mozgás és WebGL nélküli működés ellenőrzése.
Átadás
Mit kapsz egy 3D weboldal projekt végén?
SEO-barát, statikus HTML oldalszerkezet
Webre optimalizált GLB modellek és KTX2 textúrák
Interaktív Three.js jelenet lusta betöltéssel
Mobilos tartalék megoldás és tesztelés több eszközön
Gyakori kérdések
Gyakori kérdések a 3D weboldal készítésről
A 3D webes megoldás akkor jó, ha a látvány, a sebesség és a használhatóság egyszerre működik.
Mennyibe kerül egy 3D weboldal?
A projekt terjedelmétől függ: hány 3D jelenet készül, van-e kész modell, kell-e konfigurátor vagy scroll-vezérelt animáció. Irányárként: a Remote Studio projektjei 600 000 Ft + ÁFA összegtől indulnak, a hangsúlyosan 3D-s weboldalak jellemzően az 1 200 000 – 2 500 000 Ft + ÁFA sávba esnek, összetettebb élmények esetén e fölé is. Pontos árajánlatot rövid egyeztetés után adunk.
Lassítja az oldalt a 3D weboldal készítés?
Lassíthatja, ha nincs optimalizálva. Ezért tömörítjük a modelleket és a textúrákat, a 3D könyvtárat csak akkor töltjük be, amikor a jelenet a képernyő közelébe ér, addig pedig egy statikus poszterkép jelenik meg. Így a 3D elem nem rontja az első betöltést, és mobilon is csak annyi fut, amennyi valóban szükséges.
Kell hozzá kész 3D modell?
Nem feltétlenül. Indulhatunk meglévő CAD- vagy Blender-modellből, de ezekből szinte mindig külön, webre optimalizált változatot kell készíteni. Ha nincs modell, a jelenetet és az asseteket a koncepció alapján mi tervezzük meg.
SEO-barát lehet egy 3D weboldal?
Igen, ha a 3D élmény mellett az oldal tartalma HTML-ben is jól strukturált, gyorsan betölt, és a fontos információk nem kizárólag a canvasban jelennek meg. A címsorok, leírások és termékadatok szövegként maradnak az oldalon, a 3D jelenet ezeket egészíti ki.
Mi történik régebbi telefonon vagy WebGL nélkül?
Ilyenkor a látogató a gondosan elkészített poszterképet vagy egy egyszerűsített nézetet kap, a tartalom és a navigáció pedig ugyanúgy elérhető. Csökkentett mozgás beállítás esetén automatikusan kikapcsoljuk az animációt.
Mennyi idő alatt készül el egy 3D weboldal?
Ez is a terjedelemtől függ. Egy hero jelenettel vagy termékforgatóval bővített oldal gyorsabban elkészül, mint egy több jelenetes, scroll-vezérelt történet vagy egy konfigurátor. A pontos ütemezést a koncepció és az assetek áttekintése után rögzítjük.
Kapcsolódó témák
További releváns 3D webes szolgáltatások
Kezdjük el
Tervezzük meg a 3D weboldaladat
Írd le röviden a projektedet, és 24 órán belül válaszolok. Az első konzultáció kötelezettségmentes.