Zugriff auf die App gesperrt
Um Zugriff auf dieses 3D‑Tutorial zu erhalten, müssen Sie zuerst unseren YouTube‑Kanal abonnieren.
Echtzeit‑Plan: 3D‑Webseiten mit Gemini
Vergessen Sie Prompt‑Generatoren. Hier ist ein kompletter interaktiver Plan, Schritt für Schritt. Vom leeren Chat bis hin zum interaktiven 3D‑Erlebnis – nur mit Hilfe eines Echtzeit‑Gesprächs mit künstlicher Intelligenz.
Schritt 1: Umgebung vorbereiten
Sie müssen nichts auf Ihrem Computer installieren. Der gesamte Prozess läuft direkt im Browser. Für die schnellste Iteration öffnen Sie zwei Tabs nebeneinander:
- Öffnen Sie das kostenlose Google Gemini (gemini.google.com).
- Öffnen Sie den Online-Code-Editor CodePen.io oder PlayCode.io. Dort testen wir den generierten Code sofort, ohne HTML-Dateien anlegen oder speichern zu müssen.
Schritt 2: Start-Master-Prompt
Der erste Prompt ist der wichtigste. Er definiert den Rahmen für Gemini und legt die technologische Basis fest (Three.js aus dem CDN, alles in einer Datei). Kopieren Sie diesen Text und fügen Sie ihn in Gemini ein:
Du bist ein Experte für WebGL und die Three.js-Bibliothek. Deine Aufgabe ist es, kompletten HTML-Code zu schreiben (inklusive CSS und JS im Inneren) für eine funktionierende 3D‑Szene. Anforderungen: 1. Erstelle in der Mitte ein rotierendes 3D‑Objekt (TorusKnot oder Icosahedron). 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 einzigen Code-Snippet, keine Import Maps. 4. Verwende keine externen Modelle (GLTF) oder Texturen (JPG/PNG). Erstelle alles prozedural im Code (MeshStandardMaterial, Lichter, Farben). 5. Füge Punktlichter (PointLight) und sanfte Schatten hinzu. 6. Setze den Hintergrund auf eine sehr dunkle Farbe.
Schritt 3: Starten und überprüfen
Sobald Gemini den Code generiert hat, kopieren Sie ihn oben rechts im Code-Feld. Wechseln Sie in den zweiten Tab (z. B. CodePen) und fügen Sie den gesamten Code NUR in das HTML‑Feld ein (CSS‑ und JS‑Felder bleiben leer, unser Code enthält bereits alles).
Tipp: Sie sehen sofort ein rotierendes 3D‑Objekt. Versuchen Sie, mit der Maus zu klicken und zu ziehen – dank OrbitControls können Sie es drehen!
Schritt 4: Iteration in Echtzeit
Jetzt beginnt die eigentliche Echtzeitarbeit. Gehen Sie zurück zu Gemini. Sie müssen keinen neuen Code schreiben oder den alten erneut senden (Gemini merkt sich ihn). Chatten Sie einfach weiter und fügen Sie nach und nach neue Anforderungen hinzu. Probieren Sie nacheinander diese Nachrichten aus:
Das ist super. Ändere nun das Material des Objekts von einer Vollfarbe zu einem leuchtenden „Wireframe“ (Drahtgittermodell) in Neonblau und ‑rosa.
Großartig. Füge nun im Hintergrund der Szene ein sich langsam drehendes Partikelsystem hinzu (Points und PointsMaterial), das Sterne im Weltraum simuliert.
Ausgezeichnet. Und jetzt sorge dafür, dass sich beim Bewegen der Maus die Farben der Lichter fließend entsprechend der Position des Mauszeigers auf dem Bildschirm ändern.
Schritt 5: Problembehebung (Debugging)
Wenn Sie den Code in Echtzeit anpassen, macht die KI manchmal einen Fehler und Sie sehen in CodePen nur einen schwarzen oder weißen Bildschirm. Sie müssen Programmierung nicht kennen, beschreiben Sie 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 schick mir die vollständig korrigierte Version.
Fertig! Projekt speichern
Sobald Sie mit dem Ergebnis 100 % zufrieden sind, kopieren Sie den letzten funktionierenden Code aus CodePen. Öffnen Sie unter Windows den Editor (Notepad) oder auf dem Mac TextEdit, fügen Sie den Code ein und speichern Sie die Datei als „muj_3D_web.html“. Fertig! Sie haben Ihre eigene 3D‑Anwendung.