3D na webu

Interaktivní 3D přímo v prohlížeči.

Modely, které si zákazník otočí, konfigurátory produktů a weby postavené ve 3D. Propojujeme 3D tým s vývojem webu, takže model, animace i kód vznikají na jednom místě.

Pro koho to je

Když fotka
nestačí.

Interaktivní 3D dává návštěvníkovi kontrolu: produkt si prohlédne z každé strany, změní barvu nebo složení a rozhodne se s větší jistotou. Pro vás je to rozdíl, který se pozná na webu.

Zákazník si chce produkt prohlédnout ze všech stran.

Foto ze čtyř úhlů neukáže detail ani poměry. Otočitelný 3D model odpoví na otázky dřív, než je zákazník položí, a snižuje počet vrácených objednávek.

Prodáváte konfigurovatelný produkt.

Barvy, materiály nebo sestavy se dají vybrat přímo na stránce a produkt se okamžitě mění. Zákazník vidí přesně to, co objedná.

Chcete web, který si lidé zapamatují.

Scrollovaný příběh nebo 3D scéna na úvodní stránce vytvoří zážitek. Takový web se sdílí a vyčnívá mezi konkurencí.

Co dostanete

Šest výstupů, které si odnesete

013D prohlížeč produktuModel, který si návštěvník otočí, přiblíží a prohlédne. Funguje myší i dotykem a načte se rychle.
02Konfigurátor barev a variantPřepínání barev, materiálů a doplňků s okamžitou změnou 3D modelu a ceny.
03Scrollované 3D příběhyScéna, která se mění podle posunu stránky. Vhodné pro představení produktu nebo značky.
04Optimalizace modelů pro webZmenšíme model i textury tak, aby se stránka načetla rychle a vypadala dobře i na slabších zařízeních.
05Napojení na e-shopVybraná varianta se přenese do košíku se správnou cenou a skladovou položkou. Funguje na běžných platformách.
06Záložní statické verze pro slabší zařízeníPokud zařízení 3D nezvládne, stránka zobrazí kvalitní statický obrázek. Nikdo nezůstane s prázdnou plochou.
01

Three.js

Nejrozšířenější knihovna pro 3D v prohlížeči. Stará se o scénu, kameru, světlo a materiály a má velkou komunitu i množství rozšíření.

Technologie a jejich role

Scéna a kameraZáklad každé 3D stránky
Světlo a materiályRealistický vzhled v prohlížeči
RozšířeníStíny, efekty a post-processing

Kdy dává smysl

Potřebujete plnou kontrolu nad vzhledem a chováním scény.

Co přinese

Ověřený základ s širokou podporou.

02

React Three Fiber

Three.js zapsaný jako React komponenty. 3D scéna se tak skládá stejně jako zbytek webu a snadno se napojí na stav aplikace.

Technologie a jejich role

React komponentyScéna jako součást aplikace
DreiHotové pomocné prvky
Next.jsNapojení na zbytek webu

Kdy dává smysl

Web už běží v Reactu nebo Next.js a 3D má být jeho součástí.

Co přinese

Rychlejší vývoj a čistší kód než ruční scéna.

03

WebGL

Technologie v prohlížeči, která využívá grafickou kartu. Na ní běží všechno ostatní, proto hlídáme výkon a kompatibilitu zařízení.

Technologie a jejich role

Grafická kartaPlynulé vykreslení scény
Kontrola výkonuSnímková frekvence na mobilu
Záložní režimStatický obrázek, když 3D nejde

Kdy dává smysl

Scéna je složitější a musí běžet plynule i na mobilu.

Co přinese

Plynulost bez instalace a bez zásuvných modulů.

04

Formát glTF

Standardní formát 3D modelů pro web, někdy nazývaný „JPEG 3D“. Obsahuje geometrii, materiály i animace v malém souboru.

Technologie a jejich role

glTF / GLBJeden soubor s modelem a texturami
Draco kompreseMenší soubory, rychlejší načtení
Export z BlenderuPřímo z 3D scény na web

Kdy dává smysl

Model je hotový a má se dostat na web v co nejmenší velikosti.

Co přinese

Rychlé načítání a model použitelný i v dalších systémech.

Typické projekty

Tři situace, které řešíme nejčastěji.

Časté otázky

Než se ozvete.

Při správné optimalizaci ne. Model zmenšíme, načítáme ho až v potřebnou chvíli a do té doby ukážeme obrázek. Rychlost stránky měříme před spuštěním i po něm.

Ano. Scénu přizpůsobíme výkonu zařízení a na nejslabších telefonech zobrazíme záložní statickou verzi. Ovládání je upraveno pro dotyk.

Ano. Vybraná varianta se přenese do košíku jako běžná položka s cenou a skladem. Postup se liší podle platformy a konkrétní konfigurace. Shopify →

Interaktivní 3D na webu začíná od 5 000 Kč podle složitosti modelu a toho, jestli jde o prohlížeč, nebo konfigurátor. Přesnou nabídku pošleme po zhlédnutí podkladů.

Další krok

Probereme, jak by vaše 3D fungovalo na webu.

Probrat 3D web

KONTAKT

Pojďme se potkat

Máte nápad? Vyberte si termín pro společný rozhovor, nebo nám napište. Společně najdeme cestu k vašemu digitálnímu projektu.

Odesláním berete na vědomí zpracování osobních údajů.

Zásady zpracování osobních údajů