Lidé + AI = větší možnosti

Spustit projekt

3D web

Web s 3D prvky, které se dají otočit.

Produkt, stroj nebo celou scénu ukážeme na webu jako 3D model, který si návštěvník otočí myší nebo prstem. Modely připravujeme v Blenderu, na webu je vykresluje knihovna three.js. Stránka přitom zůstane rychlá a čitelná: text je v HTML pro vyhledávače, model se načte až před zobrazením a bez WebGL se ukáže obrázek. Takhle je postavený i tenhle web.

Poptat 3D webJak to funguje

Kde 3D dává smysl

Co se dá ukázat ve 3D.

3D má smysl tam, kde fotka nestačí: věc má víc stran nebo prostor, který si chce zákazník prohlédnout sám.

  • 01

    Produkt ve vitríně

    Výrobek na podstavci ve skleněné vitríně, který si zákazník otočí ze všech stran.

    • Model podle fotek, výkresů nebo 3D souboru
    • Otáčení myší i prstem
    • Fotka jako náhrada bez WebGL

  • 02

    Scéna značky

    Úvodní scéna, která nese atmosféru firmy — jako výrobní hala na tomto webu.

    • Světla a materiály podle značky
    • Nadpis a tlačítka zůstávají v HTML
    • Respektuje vypnuté animace v systému

  • 03

    Reference ve 3D

    Snímky webů a aplikací jako svítící obrazovky v rámech — tak u nás vypadají výtvory.

    • Snímek se do rámu vloží sám
    • Klik vede na detail
    • Jeden vykreslovač pro celou stránku
    Výtvory ve 3D

  • 04

    Ikony a symboly

    Svítící neonové ikony a předměty, které oživí kroky postupu nebo výhody.

    • Ikony jako 3D předměty
    • Kroky procesu v rámech
    • Stejný styl napříč webem

Technický popis

Jak 3D na webu funguje.

Co stojí za 3D prvky na tomto webu — a co dostane ten váš.

Čím se 3D na webu vykresluje?

Knihovnou three.js (verze r169) přes WebGL, které umí všechny současné prohlížeče. Knihovnu máme na vlastním serveru, ne z cizí CDN, takže web nezávisí na cizí službě.

Odkud se berou modely?

Z Blenderu. Model postavíme podle fotek, výkresů nebo hotového 3D souboru, zjednodušíme ho na rozumný počet polygonů a uložíme ve formátu GLB. Modely na tomto webu mají 3–620 kB.

Nezpomalí 3D stránku?

Na stránce běží jediný vykreslovač pro všechny 3D prvky. Model se začne načítat až 300 px před tím, než se prvek objeví na obrazovce, a do té doby je na jeho místě obrázek nebo svítící ikona ve stejném rámečku, takže se nic neposune.

Co když prohlížeč 3D neumí?

Bez WebGL zůstane obrázek nebo svítící ikona, s vypnutými animacemi v systému (prefers-reduced-motion) se model neotáčí. Text, nadpisy a odkazy jsou v HTML, takže je přečte čtečka obrazovky i vyhledávač.

Jde 3D ovládat na telefonu?

Ano. Vodorovný tah prstem otáčí modelem, svislý dál posouvá stránku, takže 3D prvek nepřekáží v rolování.

Postup

Jak 3D web vzniká.

Nejdřív se dohodneme, co má 3D ukázat, teprve potom modelujeme.

  1. 01

    Co má 3D ukázat a komu; kde na webu dává smysl.

  2. 02

    Fotky, výkresy, rozměry nebo hotový 3D soubor.

  3. 03

    Model v Blenderu: tvar, materiály, světlo a malý datový objem.

  4. 04

    Vitríny a scéna ve webu, náhradní obrázky bez WebGL.

  5. 05

    Telefony i slabší počítače, ovládání prstem, rychlost načtení.

  6. 06

    Nasazení, zaškolení a měsíc dolaďování po spuštění.

Časté dotazy

Co je 3D web?
Web, kde část obsahu tvoří 3D modely, které si návštěvník otočí myší nebo prstem — produkt ve vitríně, scéna nebo reference v rámech. Zbytek je běžný web s textem v HTML.
Nezpomalí 3D prvky web?
Na stránce běží jediný vykreslovač pro všechny modely, model se načítá až těsně před zobrazením a do té doby je na jeho místě obrázek. Modely na tomto webu mají 3–620 kB.
Funguje 3D na mobilu?
Ano. Vodorovným tahem prstu se model otáčí a svislým se dál posouvá stránka. Bez WebGL zůstane obrázek a s vypnutými animacemi v systému se model neotáčí.
Potřebuji vlastní 3D modely?
Ne. Model vytvoříme v Blenderu podle fotek, výkresů nebo rozměrů. Když 3D soubor máte, převezmeme ho a připravíme pro web.
Uvidí obsah 3D webu vyhledávače?
Ano. Nadpisy, texty i odkazy jsou v HTML jako na každém jiném webu; 3D model je doplněk, ne místo, kde by se schoval obsah.
Kolik stojí 3D web?
Web s 3D prvky stojí od 15 000 Kč. Přesná cena záleží na počtu a složitosti modelů, proto ji stanovíme po konzultaci.

Chcete produkt
ve 3D?

Pošlete fotky nebo popis toho, co má web ukázat. Na konzultaci řekneme, jestli se 3D vyplatí, a odhadneme cenu. Osobně v Ostravě nebo online, zdarma.

Domluvit konzultaci

Nápady dnes. Výsledky zítra.

  • Konzultace 30 min zdarma
  • Odpovídáme do 24 hodin
  • Nezávazný odhad ceny
Napsat zadáníDigitální světy