Real-time Plán: 3D weby přes Gemini
Zapomeňte na generátory promptů. Zde je kompletní interaktivní plán, krok za krokem. Od prázdného chatu až po interaktivní 3D zážitek – pouze pomocí konverzace s umělou inteligencí v reálném čase.
Krok 1: Příprava prostředí
Nepotřebujete nic instalovat na svůj počítač. Celý proces poběží čistě v prohlížeči. Pro nejrychlejší iteraci si otevřete dva panely vedle sebe:
- Otevřete si bezplatné Google Gemini (gemini.google.com).
- Otevřete si online editor kódu CodePen.io nebo PlayCode.io. Zde budeme ihned testovat vygenerovaný kód, aniž bychom museli zakládat a ukládat soubory HTML.
Krok 2: Zahajovací Master-Prompt
První prompt je nejdůležitější. Definuje mantinely pro Gemini a nastaví technologický základ (Three.js z CDN, vše v jednom souboru). Zkopírujte tento text a vložte ho do Gemini:
Jsi expert na WebGL a knihovnu Three.js. Tvým úkolem je napsat kompletní HTML kód (včetně CSS a JS uvnitř) pro funkční 3D scénu. Požadavky: 1. Vytvoř uprostřed rotující 3D objekt (TorusKnot nebo Icosahedron). 2. Importuj Three.js a OrbitControls přes CDN odkaz (unpkg nebo cdnjs) ve script tagu. 3. Musí to být 'Single file' - vše v jednom kusu kódu, žádné import maps. 4. Nepoužívej externí modely (GLTF) ani textury (JPG/PNG). Vše vytvoř procedurálně v kódu (MeshStandardMaterial, světla, barvy). 5. Přidej bodová světla (PointLight) a jemné stíny. 6. Pozadí nastav na velmi tmavou barvu.
Krok 3: Spuštění a kontrola
Jakmile Gemini vygeneruje kód, zkopírujte jej vpravo nahoře v rámečku pro kód. Přejděte do druhého panelu (např. CodePen) a vložte celý kód POUZE do kolonky HTML (CSS a JS kolonky nechte prázdné, náš kód má vše v sobě).
Tip: Ihned uvidíte rotující 3D objekt. Zkuste na něj kliknout myší a táhnout - díky OrbitControls se s ním dá otáčet!
Krok 4: Iterace v reálném čase
Nyní začíná skutečná práce v reálném čase. Vraťte se do Gemini. Není třeba psát nový kód nebo mu posílat ten starý (pamatuje si ho). Stačí s ním chatovat a postupně přidávat požadavky. Vyzkoušejte postupně tyto zprávy:
Tohle je super. Nyní změň materiál objektu z plné barvy na svítící 'Wireframe' (síťový model) v neonově modré a růžové barvě.
Skvělé. Nyní přidej na pozadí scény pomalu rotující částicový systém (Points a PointsMaterial), který bude simulovat hvězdy ve vesmíru.
Výborně. A teď udělej to, že když pohnu myší, barvy světel se začnou plynule měnit podle pozice kurzoru na obrazovce.
Krok 5: Řešení problémů (Debugging)
Když upravujete kód v reálném čase, AI někdy udělá chybu a na CodePenu uvidíte jen černou či bílou obrazovku. Nemusíte znát programování, stačí problém popsat do chatu:
Poslední kód, který jsi poslal, nefunguje. Obrazovka je úplně černá a nic se netočí. Zkontroluj, zda jsi správně načetl OrbitControls a zda kamera není uvnitř objektu. Zkus to opravit a pošli mi celou opravenou verzi.
Hotovo! Uložení projektu
Jakmile jste s výsledkem 100% spokojeni, zkopírujte poslední funkční kód z CodePenu. Ve Windows otevřete Poznámkový blok (Notepad) nebo na Macu TextEdit, vložte kód a uložte soubor jako 'muj_3D_web.html'. Hotovo! Máte vlastní 3D aplikaci.