3D objekty na webu už dávno nejsou jen technologické demo. Díky moderním technologiím jako Three.js a WebGL můžete na své stránky přidat interaktivní 3D modely, které uživatelé můžou otáčet, přibližovat a prozkoumávat.

Ale pozor – ne vždy je 3D model tou správnou volbou. Často je lepší použít klasický obrázek nebo video kvůli datové velikosti a výkonu.

Kdy použít 3D objekty

3D modely dávají smysl, když potřebujete:

• Interaktivitu – uživatel může model otáčet a prohlížet ze všech stran

• Konfigurátor – změny barev, materiálů nebo částí produktu v reálném čase

• Visualisace dat – 3D grafy, mapy, architektury

• Hry a aplikace

Další věc je, že je potřeba ten 3D model vytvořit.

Pro jednoduché zobrazení produktu nebo objektu často stačí:

• Statický obrázek – nejrychlejší načítání, nejmenší datová velikost

• Video se smyčkou – rotující produkt, přijatelná velikost, bez interaktivity

• CSS 3D transformace – jednoduché animace a efekty bez nutnosti načítat velké knihovny

Three.js – základ pro 3D na webu

Three.js je jedna z nejpopulárnějších JavaScriptových knihoven pro práci s 3D grafikou na webu. Zjednodušuje práci s WebGL a nabízí jednoduchá API.

Základní příklad

Jednoduchý příklad načtení a zobrazení 3D modelu:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Vytvoření scény
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Světlo
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// Ovládání myší
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 5;

// Načtení 3D modelu
const loader = new GLTFLoader();
loader.load(
  'model.glb',
  (gltf) => {
    scene.add(gltf.scene);
  },
  undefined,
  (error) => {
    console.error('Chyba při načítání modelu:', error);
  }
);

// Render loop
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

Živá ukázka

Tady je interaktivní ukázka Three.js scény. Pomocí myši můžete scénou otáčet, přibližovat a posouvat.

Formáty 3D souborů

Pro web se používá několik formátů 3D modelů. Každý má své výhody a nevýhody.

GLTF / GLB (doporučeno)

GLTF (Graphics Library Transmission Format) a jeho binární varianta GLB jsou standardem pro 3D na webu.

Výhody:

• Optimalisováno pro web

• Malá velikost souborů

• Podpora animací, materiálů a textur

• Nativní podpora v Three.js

GLB vs GLTF:

• GLB – binární formát, vše v jednom souboru (model + textury)

• GLTF – textový formát (JSON), textury jako separátní soubory

Doporučení: Použijte GLB pro co nejjednodušší použití. Pokud máte 3D model v jiném formátu, lze ho převést některým z dostupných nástrojů.

Ukázka načtení GLB modelu

Ukázka načtení 3D modelu ve formátu GLB pomocí GLTFLoader:

Vytváření 3D modelů pomocí AI

Díky moderním AI nástrojům můžete vytvářet 3D modely z textu nebo obrázků během několika minut bez znalostí 3D grafiky:

Meshy.ai – generování 3D modelů z textu nebo obrázků.

Luma Labs – vytváření 3D modelů pomocí AI z videa nebo fotek.

Tripo3D – AI generování 3D modelů s podporou riggingu (kostra pro animace).

CSS 3D transformace – alternativa pro jednoduché efekty

Pro jednoduché 3D efekty nepotřebujete Three.js. Jde využít CSS 3D transformace.

Příklad – otáčející se karta

Použití:

• Flip efekty

• 3D menu

• Jednoduché animace

Datová velikost – kdy raději použít obrázek nebo video

3D modely mohou být datově náročné. Než se rozhodnete použít 3D model, zvažte alternativy.

Srovnání velikostí

Typ	Velikost	Interaktivita
Statický obrázek (WebP)	~50 KB	Ne
Video (MP4, 5s smyčka)	~0,5–2 MB	Ne
3D model (GLB + textury)	~2-10 MB	Ano
3D model s Draco kompresí	~0,5-2 MB	Ano
Three.js knihovna	~600 KB	–

V praxi to znamená, že jeden interaktivní 3D prvek na stránce může znamenat jednotky až desítky MB. Při více modelech nebo větších texturních mapách se tato hodnota rychle násobí, což může být problém hlavně na mobilním připojení.

Optimalisace 3D modelů

Pokud už musíte použít 3D model, optimalisujte ho:

• Decimace geometrie – snižte počet polygonů (v Blenderu: Modifiers → Decimate)

• Komprese textur – použijte WebP nebo zmenšete rozlišení (512×512 místo 4096×4096)

• Draco komprese – komprese geometrie v GLTF (až 90% menší soubory)

• Lazy loading – načítejte model až když je potřeba (při scrollu nebo po kliknutí)

Video jako alternativa

Pro neinteraktivní rotující produkt je často lepší video:

<video autoplay loop muted playsinline>
  <source src="product-rotation.mp4" type="video/mp4">
  <source src="product-rotation.webm" type="video/webm">
</video>

Výhody videa:

• Menší velikost než 3D model + knihovna

• Funguje všude bez nutnosti WebGL

• Lepší výkon na slabších zařízeních

Výkon a kompatibilita

3D objekty na webu vyžadují slušný hardware. Na starých zařízeních nebo slabších mobilech může být zážitek špatný.

Detekce podpory WebGL

function isWebGLAvailable() {
  try {
    const canvas = document.createElement('canvas');
    return !!(
      window.WebGLRenderingContext &&
      (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
    );
  } catch (e) {
    return false;
  }
}

if (!isWebGLAvailable()) {
  // Zobraz fallback – obrázek nebo video
  console.log('WebGL není podporováno');
}

Progressive enhancement

Podle situace se hodí použít fallback pro zařízení bez WebGL podpory:

<div id="model-container">
  <!-- Fallback obrázek -->
  <img src="product.jpg" alt="Produkt" id="fallback">
</div>

<script>
  if (isWebGLAvailable()) {
    // Skryj fallback a načti 3D model
    document.getElementById('fallback').style.display = 'none';
    loadThreeJSModel();
  }
</script>

Závěr

• Three.js je jedna z nejpopulárnějších knihoven pro práci s 3D na webu

• Používejte GLB/GLTF formát – optimalisovaný pro web

• AI nástroje umožňují rychle vytvářet 3D modely, pokud to sami neumíte

• Pro jednoduché efekty stačí CSS 3D transformace

• Často je lepší použít obrázek nebo video kvůli datové velikosti

3D objekty mohou výrazně oživit váš web, ale používejte je s rozvahou. Ne vždy je složitost a datová velikost ospravedlnitelná.