Plan w czasie rzeczywistym: strony 3D z Gemini
Zapomnij o generatorach promptów. Oto kompletny interaktywny plan, krok po kroku. Od pustego czatu aż po interaktywne 3D – wyłącznie przy pomocy rozmowy ze sztuczną inteligencją w czasie rzeczywistym.
Krok 1: Przygotowanie środowiska
Nie musisz nic instalować na swoim komputerze. Cały proces będzie przebiegał wyłącznie w przeglądarce. Dla najszybszej iteracji otwórz dwa panele obok siebie:
- Otwórz bezpłatną usługę Google Gemini (gemini.google.com).
- Otwórz internetowy edytor kodu CodePen.io lub PlayCode.io. Tutaj będziemy od razu testować wygenerowany kod, bez konieczności zakładania i zapisywania plików HTML.
Krok 2: Startowy master‑prompt
Pierwszy prompt jest najważniejszy. Określa ramy dla Gemini i ustawia podstawę technologiczną (Three.js z CDN, wszystko w jednym pliku). Skopiuj ten tekst i wklej go do Gemini:
Jesteś ekspertem od WebGL i biblioteki Three.js. Twoim zadaniem jest napisać kompletny kod HTML (łącznie z CSS i JS w środku) dla działającej sceny 3D. Wymagania: 1. Utwórz pośrodku obracający się obiekt 3D (TorusKnot lub Icosahedron). 2. Zaimportuj Three.js i OrbitControls przez link CDN (unpkg lub cdnjs) w znaczniku script. 3. To musi być „single file” – wszystko w jednym kawałku kodu, bez import maps. 4. Nie używaj zewnętrznych modeli (GLTF) ani tekstur (JPG/PNG). Wszystko stwórz proceduralnie w kodzie (MeshStandardMaterial, światła, kolory). 5. Dodaj światła punktowe (PointLight) i delikatne cienie. 6. Ustaw tło na bardzo ciemny kolor.
Krok 3: Uruchomienie i kontrola
Gdy Gemini wygeneruje kod, skopiuj go w prawym górnym rogu w ramce z kodem. Przejdź do drugiego panelu (np. CodePen) i wklej cały kod WYŁĄCZNIE do pola HTML (pola CSS i JS zostaw puste, nasz kod zawiera wszystko w sobie).
Wskazówka: Od razu zobaczysz obracający się obiekt 3D. Spróbuj kliknąć na niego myszą i przeciągnąć – dzięki OrbitControls można nim obracać!
Krok 4: Iteracje w czasie rzeczywistym
Teraz zaczyna się prawdziwa praca w czasie rzeczywistym. Wróć do Gemini. Nie trzeba pisać nowego kodu ani wysyłać mu starego (on go pamięta). Wystarczy z nim rozmawiać na czacie i stopniowo dodawać wymagania. Po kolei wypróbuj te wiadomości:
To jest super. Teraz zmień materiał obiektu z pełnego koloru na świecący „wireframe” (model siatkowy) w neonowym niebieskim i różowym kolorze.
Świetnie. Teraz dodaj w tle sceny powoli obracający się system cząsteczek (Points i PointsMaterial), który będzie symulował gwiazdy w kosmosie.
Doskonale. A teraz zrób tak, aby po poruszeniu myszą kolory świateł zaczęły płynnie zmieniać się w zależności od położenia kursora na ekranie.
Krok 5: Rozwiązywanie problemów (debugging)
Gdy modyfikujesz kod w czasie rzeczywistym, AI czasem popełni błąd i w CodePenie zobaczysz tylko czarny albo biały ekran. Nie musisz znać programowania, wystarczy, że opiszesz problem na czacie:
Ostatni kod, który wysłałeś, nie działa. Ekran jest całkowicie czarny i nic się nie obraca. Sprawdź, czy poprawnie załadowałeś OrbitControls i czy kamera nie znajduje się wewnątrz obiektu. Spróbuj to naprawić i wyślij mi całą poprawioną wersję.
Gotowe! Zapisanie projektu
Gdy będziesz w 100% zadowolony z rezultatu, skopiuj ostatnią działającą wersję kodu z CodePena. W systemie Windows otwórz Notatnik (Notepad), a na Macu TextEdit, wklej kod i zapisz plik jako „muj_3D_web.html”. Gotowe! Masz własną aplikację 3D.