Interaktivní 3D fotky: Webový obsah dostává nový rozměr

Kdysi stačilo na web hodit obyčejný <img> tag a mělo to stačit. Dnes to jde mnohem dál. Díky webovým komponentám přidáte pokročilou interaktivitu bez složitých frameworků nebo build nástrojů.

Představuji <image-3d> – lehký webový komponent, který z běžné 2D fotky udělá interaktivní 3D zážitek. Uživatelé ji otočí taháním, přiblíží pinchedem a prozkoumají z každého úhlu. A to všechno jen drop-in řešením.

Proč to změní vaše projekty

Statické obrázky už nestačí. Lidé chtějí interakci. Ideální pro produktové focení, portfolia, nemovitosti nebo architektonickou dokumentaci. Problém s jinými 3D řešeními? Vyžadují složitý backend, těžké knihovny, velkou zátěž a znalost WebGL.

<image-3d> to všechno schová. Převádí 2D na 3D, generuje meshe a gaussian splatting. Vy se soustřeďte na tvorbu.

Jak na to: Stačí dvě řádky

Integrace je hračka.

<script src="https://mukba.ng/image-3d/embed.js" defer></script>
<image-3d src="/vaše-foto.jpg"></image-3d>

Žádné npm, žádný build, žádná konfigurace. Komponent se sám zaregistruje a jede.

V moderním IDE s podporou AI můžete nechat asistenta, aby to za vás nastavil. Popište, co chcete, a ukáže diff před commitnutím.

Přizpůsobení na míru, bez rizik

Jednoduché, ale flexibilní. Atributy ovládají chování:

Hlavní atributy:

• src (povinný) – URL fotky. Server mukba.ng ji zpracuje na lehký mesh a detailní 3D splat.
• width / height – Nastavte velikost v pixelech nebo CSS jednotkách, třeba 50% či 40vw.
• loading="lazy" – Načte se až při scrollu do zobrazení. Super pro stránky s více fotkami.
• nobrand – Odstraní značku, pokud hostujete sami nebo máte licenci.

Stylování přes CSS proměnné:

Díky shadow DOM se nic nepokazí globálním CSS. Použijte:

image-3d {
  --image-3d-max-width: 600px;
  --image-3d-max-height: 80vh;
  --image-3d-radius: 8px;
}

Flexibilita bez pastí.

Eventy pro pokročilé

Chcete sledovat život komponentu? Posílá custom eventy:

const el = document.querySelector('image-3d');
el.addEventListener('image-3d:loading',  () => console.log('Načítám...'));
el.addEventListener('image-3d:progress', (e) => console.log('Pokrok:', e.detail));
el.addEventListener('image-3d:ready',    () => console.log('Připraveno'));
el.addEventListener('image-3d:error',    (e) => console.warn('Chyba:', e.detail.error));

Ukázíte loader, tracknete analytics nebo retry. Vždy se vrátí k originální fotce – žádný broken stav.

Chytré optimalizace pod kapotou

Nejdřív se načte lehký mesh (~11KB) pro okamžitý zobrazení. Pak přejde na detailní splat s plynulým crossfade. Progresivní načítání.

Ovládání? Tahání rotuje, pinch zoomuje, dlouhý tlak resetuje. Intuitivní jako má být.

Kam to zapadá do vašeho stacku

Jako standardní web komponent funguje všude:

• React / Vue / Svelte – Přímo do template, bez wrapperu.
• Statické weby – Ideál pro blogy, portfolia, docs bez JS frameworků.
• Next.js / Nuxt – Podporuje SSR a lazy loading podle viewportu.
• Klasické server-renderované appky – Prostě HTML, jede všude.

Co to znamená do budoucnosti

Webové komponenty dozrávají. <image-3d> ukazuje, jak 3D rendering, ML zpracování obrázků nebo realtime spolupráce stane dostupným pro všechny. Jen script tag, žádný lock-in.

Pro e-shopy, design portfolia, realitky nebo blogy s obsahem – must-have nástroj. Nyní to vypadá jako samozřejmost, ale někdo to musel vymyslet.

Vyzkoušejte hned

Podívejte se na mukba.ng/image-3d/docs. Vezměte fotku, přidejte dvě řádky kódu a sledujte, jak se obsah oživí v 3D.