Echtzeit-Plan: 3D-Webseiten mit Gemini
Vergiss Prompt-Generatoren. Hier ist ein vollständiger interaktiver Plan, Schritt für Schritt. Vom leeren Chat bis zum interaktiven 3D-Erlebnis – nur mithilfe einer Unterhaltung mit künstlicher Intelligenz in Echtzeit.
Schritt 1: Vorbereitung der Umgebung
Du musst nichts auf deinem Computer installieren. Der gesamte Prozess läuft nur im Browser. Für die schnellste Iteration öffne zwei Tabs nebeneinander:
- Öffne das kostenlose Google Gemini (gemini.google.com).
- Öffne den Online-Code-Editor CodePen.io oder PlayCode.io. Dort werden wir den generierten Code sofort testen, ohne HTML-Dateien anlegen und speichern zu müssen.
Schritt 2: Start-Master-Prompt
Der erste Prompt ist der wichtigste. Er definiert die Leitplanken für Gemini und legt die technologische Basis fest (Three.js aus dem CDN, alles in einer Datei). Kopiere diesen Text und füge ihn in Gemini ein:
Du bist Experte für WebGL und die Bibliothek Three.js. Deine Aufgabe ist es, kompletten HTML-Code (inklusive CSS und JS darin) für eine funktionierende 3D-Szene zu schreiben. Anforderungen: 1. Erstelle in der Mitte ein rotierendes 3D-Objekt (TorusKnot oder Ikosaeder). 2. Importiere Three.js und OrbitControls über einen CDN-Link (unpkg oder cdnjs) im Script-Tag. 3. Es muss eine „Single file“-Lösung sein – alles in einem Code-Snippet, keine Import Maps. 4. Verwende keine externen Modelle (GLTF) oder Texturen (JPG/PNG). Erzeuge alles prozedural im Code (MeshStandardMaterial, Lichter, Farben). 5. Füge Punktlichter (PointLight) und dezente Schatten hinzu. 6. Setze den Hintergrund auf eine sehr dunkle Farbe.
Schritt 3: Starten und Überprüfen
Sobald Gemini den Code generiert hat, kopiere ihn oben rechts im Code-Fenster. Wechsle in den zweiten Tab (z. B. CodePen) und füge den gesamten Code NUR in das HTML-Feld ein (die Felder für CSS und JS lässt du leer, unser Code enthält bereits alles).
Tipp: Du siehst sofort ein rotierendes 3D-Objekt. Versuche, mit der Maus darauf zu klicken und zu ziehen – dank OrbitControls kannst du es drehen!
Schritt 4: Iteration in Echtzeit
Jetzt beginnt die eigentliche Echtzeitarbeit. Kehre zurück zu Gemini. Du musst keinen neuen Code schreiben oder ihm den alten schicken (es merkt sich diesen). Es reicht, mit ihm zu chatten und nach und nach Anforderungen hinzuzufügen. Probiere nacheinander diese Nachrichten aus:
Das ist super. Ändere nun das Material des Objekts von Vollfarbe auf ein leuchtendes „Wireframe“ (Drahtgittermodell) in neonblauer und rosa Farbe.
Großartig. Füge nun im Hintergrund der Szene ein langsam rotierendes Partikelsystem (Points und PointsMaterial) hinzu, das Sterne im Weltraum simuliert.
Ausgezeichnet. Und jetzt sorge dafür, dass sich beim Bewegen der Maus die Farben der Lichter sanft entsprechend der Position des Cursors auf dem Bildschirm verändern.
Schritt 5: Problemlösung (Debugging)
Wenn du den Code in Echtzeit anpasst, macht die KI manchmal einen Fehler und du siehst in CodePen nur einen schwarzen oder weißen Bildschirm. Du musst Programmierung nicht kennen, beschreibe das Problem einfach im Chat:
Der letzte Code, den du geschickt hast, funktioniert nicht. Der Bildschirm ist komplett schwarz und nichts rotiert. Überprüfe, ob du OrbitControls korrekt geladen hast und ob die Kamera nicht im Inneren des Objekts ist. Versuche, das zu beheben, und schicke mir die vollständig korrigierte Version.
Fertig! Projekt speichern
Sobald du mit dem Ergebnis zu 100 % zufrieden bist, kopiere den letzten funktionierenden Code aus CodePen. Unter Windows öffnest du den Editor (Notepad) oder auf dem Mac TextEdit, fügst den Code ein und speicherst die Datei als „mein_3D_web.html“. Fertig! Du hast deine eigene 3D-Anwendung.