Dostęp do aplikacji zablokowany
Aby uzyskać dostęp do tego tutorialu 3D, musisz najpierw zasubskrybować nasz kanał na YouTube.
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 doświadczenie – 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 działał wyłącznie w przeglądarce. Aby uzyskać najszybszą iterację, otwórz dwa panele obok siebie:
- Otwórz darmowe 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. Definiuje 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 tagu script. 3. Musi to 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 utwó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 sprawdzenie
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 TYLKO do pola HTML (pola CSS i JS pozostaw puste, nasz kod ma 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żesz nim obracać!
Krok 4: Iteracja w czasie rzeczywistym
Teraz zaczyna się właściwa praca w czasie rzeczywistym. Wróć do Gemini. Nie trzeba pisać nowego kodu ani wysyłać mu starego (pamięta go). Wystarczy z nim rozmawiać na czacie i stopniowo dodawać wymagania. Wypróbuj po kolei 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 się zmieniać w zależności od pozycji 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 lub biały ekran. Nie musisz znać programowania, wystarczy opisać 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 oraz 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ący kod 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.