Mit einem Prompt in 30 Sekunden zur 3D-Website (6 getestet)

Viele Prompt-Bibliotheken für 3D-Websites verlangen Geld für den Prompttext selbst – oder zeigen nur ein Demo-Video und behalten die eigentlichen Anweisungen für sich. Hier kommen sechs vollständige Prompts zum direkten Kopieren: unverändert in Claude einfügen oder mit einer kleinen Anpassung für Lovable, Bolt und Cursor verwenden. Alle sechs wurden mit einem Live-Modell ausgeführt. Fünf lieferten funktionierende Three.js-Seiten, und jedes Screenshot weiter unten zeigt ein echtes Rendering – keinen Mockup-Entwurf.

Sechs 3D-Website-Prompts zum sofortigen Kopieren

Jeder Prompt fordert eine einzelne HTML-Datei an, die Three.js über ein CDN lädt. Das ist mehr als nur bequem: Die Datei lässt sich lokal in jedem Browser öffnen, unkompliziert an Entwickler weitergeben oder in einen Custom-Code-Block einfügen. Gleichzeitig zwingt diese Vorgabe das Modell dazu, die Szene in sich geschlossen aufzubauen, statt Imports über ein ganzes Projekt zu verteilen.

1. Hero-Section mit Partikel-Galaxie

Erstelle eine einzelne HTML-Datei mit einer interaktiven 3D-Partikelgalaxie als
Hero-Section unter Verwendung von Three.js (über ein CDN laden). Anforderungen:
rund 50.000 Partikel formen eine Spiralgalaxie, die sich langsam dreht; die
Partikelfarben verlaufen von warmem Amber im Kern zu Violett am äußeren Rand;
füge OrbitControls hinzu, damit Besucher per Ziehen drehen und zoomen können;
lege darüber eine zentrierte Hero-Überschrift mit dem Text "Build Beyond Flat",
einer kurzen Subline und einem CTA-Button; setze pointer-events: none für den
Overlay-Container und pointer-events: auto für den CTA-Button, damit die
Galaxie hinter dem Text ziehbar bleibt; dunkler Hintergrund #0a0616;
auf Fenstergrößenänderungen reagieren. Gib NUR die vollständige HTML-Datei in
einem einzigen Codeblock aus.

Generiert in 27 Sekunden bei 3.692 Output-Tokens. Die Galaxie rotiert, das Drehen per Drag funktioniert, und der Button bleibt trotz Overlay klickbar. Ein echter Schwachpunkt: Die Subline liegt auf dem hellen Galaxiekern und ist schwer lesbar. Die Lösung steht weiter unten in den Testnotizen.

2. Scroll-gesteuerte Produktinszenierung

Erstelle eine einzelne HTML-Datei: eine scroll-gesteuerte 3D-Produktinszenierung
mit Three.js, geladen über ein CDN. Anforderungen: ein schwebender verchromter
Torus-Knoten mittig auf einem fixierten Fullscreen-Canvas; die Seite besitzt 4
Scroll-Abschnitte in voller Bildschirmhöhe, und beim Scrollen umkreist die
Kamera das Objekt über volle 360 Grad, während die Materialfarbe pro Abschnitt
fließend wechselt (Silber, Tiefblau, Smaragd, Kupfer); jeder Abschnitt zeigt
eine Überschrift und eine einzeilige Beschreibung links über dem Canvas;
glatte Interpolation (lerp) beim Scrollen, damit die Bewegung gedämpft wirkt;
dunkler Studio-Look mit zwei farbigen Spotlights und weichem Bodenschatten;
auf Größenänderungen reagieren. Gib NUR die vollständige HTML-Datei in einem
einzigen Codeblock aus.

Das war die aufwendigste der fünf funktionierenden Generierungen: 63 Sekunden und 7.023 Output-Tokens. Gleichzeitig war es das eindrucksvollste Ergebnis. Beim Scrollen bewegt sich die Kamera um das Objekt, und das Material wechselt exakt wie verlangt je Abschnitt seine Farbe:

Auch die gedämpfte lerp-Interpolation wurde korrekt umgesetzt. Die Bewegung wirkt schwer und hochwertig wie bei einer Agentur-Website, nicht wie eine scroll-gekaperte Slideshow.

3. Flüssiger GLSL-Farbverlauf als Hintergrund

Erstelle eine einzelne HTML-Datei mit einem animierten WebGL-Fullscreen-
Hintergrund als flüssigem Farbverlauf, umgesetzt mit einem eigenen GLSL-
Fragment-Shader und Three.js über ein CDN. Anforderungen: langsam bewegte,
organische Blobs in Tiefblau, Violett und Koralle, gesteuert durch ein Time-
Uniform und Simplex-artiges Noise im Fragment-Shader; füge dezentes Filmkorn im
Shader hinzu; lege darüber eine zentrierte Glass-Karte (Backdrop Blur) mit
einer weißen Überschrift "Ship Immersive Sites", einer Subline und zwei Buttons;
die Animation muss auf einem Laptop flüssig bleiben (ein einzelnes Quad, keine
Postprocessing-Passes); auf Größenänderungen reagieren. Gib NUR die vollständige
HTML-Datei in einem einzigen Codeblock aus.

31 Sekunden, 3.830 Tokens, beim ersten Versuch bestanden. Der Zusatz „ein einzelnes Quad, keine Postprocessing-Passes“ ist die Performance-Leitplanke: Ohne ihn greifen Modelle gern zu EffectComposer und Bloom-Passes, die auf integrierten GPUs die Bildrate einbrechen lassen.

4. 3D-Portfolio-Fly-through – der schwierige Fall

Erstelle eine einzelne HTML-Datei: ein 3D-Portfolio mit Three.js von einem CDN.
Sechs schwebende Projektkarten (abgerundete Flächen mit Platzhalter-
Verlaufstexturen und Projekttiteln, die auf die Kartentextur gerendert werden)
sind entlang einer sanften Kurve im 3D-Raum angeordnet. Beim Scrollen fliegt die
Kamera entlang der Kurve nach vorn und rückt jede Karte nacheinander in den
Fokus; die Kamera muss die fokussierte Karte mit angenehmem Rand vollständig im
Bild halten und darf niemals durch eine Karte fliegen; die fokussierte Karte
wird leicht vergrößert. Benachbarte Karten bleiben für räumliche Tiefe teilweise
sichtbar. Füge dezenten Nebel, einen dunklen Hintergrund und gedämpfte Scroll-
Interpolation hinzu. Ein Klick auf eine fokussierte Karte öffnet einen Link.
Auf Größenänderungen reagieren. Halte den Code kompakt: eine wiederverwendete
Funktion zum Erstellen der Karten, keine Kommentare. Gib NUR die vollständige
HTML-Datei in einem einzigen Codeblock aus.

Dieser Prompt brauchte drei Durchläufe und ist noch immer nicht produktionsreif. Warum wir ihn trotzdem veröffentlichen, zeigt das Screenshot: Die Karte wird gerendert, aber die Kamera steht dahinter – deshalb ist der Titel spiegelverkehrt. Der erste Lauf überschritt mitten in der Datei unser Output-Limit von 16.000 Tokens. Der zweite Lauf – mit der Zeile „Halte den Code kompakt“, die deshalb im Prompt steht – erzeugte Karten, ließ die Kamera aber direkt durch sie hindurchfliegen. Der dritte korrigierte das Clipping und verlor dafür die Scroll-Kopplung der Kamera. Kamera-Choreografie entlang eines Pfads plus Texturen für einzelne Karten ist für Modelle tatsächlich anspruchsvoller als die Szenen oben. Plane eine Debugging-Runde ein oder vereinfache auf ein statisches, gebogenes Grid mit Hover-States.

5. Interaktiver Produkt-Viewer

Erstelle eine einzelne HTML-Datei: einen interaktiven 3D-Produkt-Viewer mit
Three.js von einem CDN. Platziere mittig auf einem Sockel einen stilisierten,
drahtgitterfreien geometrischen Produktplatzhalter (einen abgeschrägten Würfel
oder eine Kapsel). Rechts befindet sich ein Panel mit drei Farbswatches und
einem Metall/Matt-Umschalter, die das Material live aktualisieren; OrbitControls
sind auf horizontale Drehung begrenzt; weiche Drei-Punkt-Studiobeleuchtung und
ein Kontaktschatten. Das Panel soll als schlichtes HTML/CSS über dem Canvas
liegen. Auf Größenänderungen reagieren. Gib NUR die vollständige HTML-Datei in
einem einzigen Codeblock aus.

Beim ersten Versuch bestanden: 66 Sekunden, 7.719 Tokens. Die Swatches und der Metall/Matt-Umschalter aktualisieren das Material live. Dazu kam eine ungefragte, aber sinnvolle Ergänzung des Modells: eine Fußnote, die erklärt, dass die Drehung auf die horizontale Achse beschränkt ist, damit das Produkt im Bild bleibt.

6. Einseitige 3D-Unternehmenswebsite

Erstelle eine einzelne HTML-Datei: eine One-Page-Website für ein Designstudio
mit Three.js von einem CDN. Abschnitte: Hero, Services, Work, Contact. Eine
einzige abstrakte Low-Poly-Form schwebt oben rechts im Hero-Bereich und dreht
sich langsam; beim Scrollen in jeden Abschnitt verändert die Form ihre Größe
und Farbe passend zum Akzent des jeweiligen Abschnitts. Die Abschnitte nutzen
ansonsten schlankes HTML/CSS (kein aufwendiges 3D je Abschnitt), damit die Seite
schnell bleibt. Smooth Scroll, mobilfreundlich, auf Größenänderungen reagieren.
Gib NUR die vollständige HTML-Datei in einem einzigen Codeblock aus.

62 Sekunden, 7.419 Tokens. Das Modell erfand einen Studionamen, baute die vier Bereiche und platzierte einen Low-Poly-Ikosaeder genau an der gewünschten Stelle. Unser erster Versuch mit diesem Prompt stieß an ein Output-Limit von 8.000 Tokens und kam abgeschnitten zurück. Wer ein Modell über eine API aufruft, sollte für Full-Page-Prompts daher ein Output-Limit von mindestens 16.000 Tokens setzen.

So liefen die Tests tatsächlich

Drei Durchläufe pro Prompt auf einem Modell sind eine Momentaufnahme, kein Benchmark. Sie zeigen aber, wo Prompt-zu-3D-Generierung Mitte 2026 steht. Zur Methode: claude-sonnet-5 per API am 17. Juli 2026, Standardeinstellungen, kein System-Prompt. Gerendert wurde in Desktop-Chrome bei 1280×720 auf einem Apple-Silicon-MacBook. In den erfolgreichen Durchläufen wählte das Modell selbstständig den Three.js-r128-UMD-Build von einem öffentlichen CDN.

Der einzige visuelle Mangel unter den fünf funktionierenden Seiten betrifft Prompt 1: Die Subline sitzt auf dem hellsten Teil der Galaxie und ist fast unlesbar. Eine einzige Nachfasszeile löste das Problem: Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. Dieses Muster zieht sich durch die Tests: Die 3D-Szene selbst gelingt meist, während das Iterationsbudget für Typografie, Kontrast von Overlays und – beim Portfolio – die Kamera-Choreografie draufgeht.

Die Kosten spielen in dieser Größenordnung keine Rolle. Der komplette Testlauf – neun Generierungen einschließlich der Portfolio-Wiederholungen, rund 46.000 Output-Tokens – kostete deutlich unter einem Dollar. Ausgeführt wurde er über AIReiter, das Claude-API-Zugang zu einem Fünftel des offiziellen Token-Preises weiterverkauft. Selbst eine zähe Iterationsrunde bleibt damit im Kleingeldbereich.

So formulierst du eigene Prompts für 3D-Websites

Die erfolgreichen Prompts folgen alle demselben Bauplan aus fünf Teilen. Wenn alle fünf enthalten sind, steigen die Chancen auf einen funktionierenden ersten Versuch deutlich.

1. Ein klares Szenenmotiv. Eine Galaxie, ein Torus-Knoten, ein Gradientenfeld. In unseren Durchläufen und den meisten Community-Beispielen lassen Modelle vor allem dann Anforderungen fallen, wenn ein Prompt mehrere voneinander unabhängige 3D-Features auf einer Seite verlangt.
2. Ein Treiber für die Bewegung. Entweder Zeit (slowly rotates, driven by a time uniform) oder Scrollen (as the user scrolls, the camera orbits). Das sollte explizit genannt werden; „animated“ allein lässt dem Modell Raum für eine langweilige Standardlösung. Die Lehre aus dem Portfolio-Fehler: Ein Objekt per Scrollen anzutreiben, funktioniert zuverlässig. Eine Kamera entlang eines Pfads zwischen Objekten per Scrollen zu steuern, ist der Punkt, an dem es brüchig wird.
3. Die Interaktion. OrbitControls für Drehen per Drag funktionierte in jedem erfolgreichen Testlauf. Liegt Text über dem Canvas, fordere pointer-events: none für den Overlay-Container und pointer-events: auto für Buttons an. Sonst fängt die Textebene die Drag- und Klick-Events ab, die eigentlich für die Szene gedacht sind.
4. Der Inhalt des Overlays. Gib den exakten Überschriftentext in Anführungszeichen vor. Nicht spezifizierten Text füllen Modelle mit generischen Slogans, die du anschließend ohnehin ersetzen musst.
5. Leitplanken für Performance und Umfang. Partikelzahl, single quad, no postprocessing oder low-poly halten die Seite schnell. keep the code compact hält die Ausgabe innerhalb der API-Token-Limits. Zwei von neun Durchläufen scheiterten am Output-Limit, bevor die Codequalität überhaupt eine Rolle spielte.

Diese Begriffe lenken das Modell in Richtung echtes 3D statt einer flachen CSS-Imitation: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Die Wortwahl ist wichtig, weil sie echten API-Namen entspricht. Das Modell schreibt dadurch gegen Bibliotheken, die es im Training gesehen hat, statt Funktionen frei zu improvisieren.

Der schnellere Weg: bestehenden Code einfügen

Für Effekte, die sich kaum präzise beschreiben lassen, gibt es noch eine zweite Methode: Suche auf CodePen einen fertigen Three.js-Effekt, füge den Rohcode in dein KI-Tool ein und schreibe nur Add this 3D animation to the hero. Das Modell übersetzt das Snippet dann in deinen Stack – React-Komponenten, dein Build-Setup, deine Abschnittsstruktur. Genau dieser Integrationsaufwand ist meist der mühsame Teil. Builder.io hat den Trick mit einer Planetenanimation aus 50.000 Partikeln dokumentiert, einschließlich desselben Layering-Fixes mit pointer-events: none, in ihrem Walkthrough.

Wenn es um die Hochglanz-Optik prämierter Websites geht, ist das der Ansatz mit dem größten Hebel: Die Shader-Mathematik stammt von einem Menschen, der sie abgestimmt hat; die KI übernimmt lediglich die Integration.

Welche Tools diese Prompts verarbeiten

Die sechs Prompts oben sind tool-agnostisch. Jedes Tool, das HTML/JS schreiben und Vorschauen anzeigen kann, führt sie aus. Unterschiede gibt es bei der Form der Ausgabe und beim Eigentum am Code, geprüft am 17. Juli 2026:

Zwei davon verdienen einen Hinweis. VULK verspricht echten React-Three-Fiber-Code – interaktive WebGL-Szenen statt eines geloopten Video-Headers – und die Showcase-Websites bestätigen das. Echter Code statt Video-Header: Genau diese Unterscheidung sollte man prüfen, bevor man für einen beliebigen „AI 3D Website Builder“ bezahlt. Wer lieber Prompts durchstöbert als eigene zu schreiben, findet bei MotionSites eine kategorisierte Bibliothek für Lovable, Bolt, Cursor und Claude. Ein Teil lässt sich kostenlos kopieren, der Rest liegt hinter einem Abonnement:

Wo Prompts an Grenzen stoßen

In Threads auf r/lovable und r/web_design taucht regelmäßig die Frage auf, ob sich Websites wie mont-fort.com oder die Labs-Seiten von Noomo Agency mit dem richtigen Prompt nachbauen lassen. Die ehrliche Antwort: nicht allein mit einem Prompt. Solche Seiten basieren auf individuellen GLTF-Modellen, art-direktiertem Licht und maßgeschneiderten Shadern – Assets, die ein Text-Prompt nicht herbeizaubern kann. Ein Prompt liefert die Mechanik dieser Seiten, also scroll-gesteuerte Kameras, Shader-Hintergründe und gedämpfte Bewegungen, allerdings mit Platzhalter-Geometrie. Eine echte Modelldatei einzusetzen, verringert die Lücke teilweise. Beleuchtung, Materialien und mobile Fallbacks bleiben trotzdem echte Designarbeit. Der misslungene Portfolio-Fly-through oben zeigt dieselbe Lektion im Kleinen: Je stärker ein Prompt choreografierten Szenen mit mehreren Objekten ähnelt, desto mehr menschliche Iteration ist nötig.

Drei Fehlerbilder decken die meisten kaputten Generierungen ab – jeweils mit einer Ein-Zeilen-Lösung:

• Schwarzer Bildschirm, keine sichtbaren Fehler. Meist passen ES-Module und CDN-Import nicht zusammen. Fix-Prompt: Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128 ist die Version, die unsere Testläufe ungefragt ausgewählt haben, und sie funktioniert weiterhin. Neuere Three.js-Versionen haben den UMD-Pfad eingestellt, daher vermeidet eine feste Version den Konflikt.)
• Auf Desktop flüssig, auf Smartphones ruckelig. Die Partikelzahl war für den Laptop noch in Ordnung. Fix-Prompt: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• Die 3D-Szene läuft, aber auf der Seite ist nichts klickbar. Das Canvas oder ein Overlay fängt Events ab. Fix-Prompt: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

Und ein Fehler aus unseren eigenen Durchläufen: Text auf einer 3D-Karte wird spiegelverkehrt gerendert. Die Kamera blickt auf die Rückseite der Fläche. Fix-Prompt: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

FAQ

Gibt es kostenlose Prompts für 3D-Websites?

Ja. Die sechs Prompts in diesem Beitrag sind vollständig und kostenlos kopierbar. Auch DocsBot und der Free-Tier von MotionSites bieten weitere Beispiele. Kostenpflichtige Bibliotheken liefern vor allem mehr Auswahl und vorab getestete Varianten, aber keine grundsätzlich andere Art von Prompt.

Funktionieren diese Prompts in Lovable oder Bolt?

Ja, mit einer Anpassung: Streiche die Anforderung einer „einzelnen HTML-Datei“, weil diese Plattformen React-Projekte aufsetzen. Alles andere bleibt gleich – Szenenmotiv, Bewegungstreiber, Interaktion und Performance-Leitplanke lassen sich direkt übertragen.

Muss ich Three.js kennen, um einen 3D-Website-Prompt zu verwenden?

Für die Generierung nein, für Iterationen ein wenig. Die Prompts oben enthalten bereits das nötige Three.js-Vokabular. Zu wissen, was OrbitControls oder ein Fragment-Shader ist, hilft dabei, gezielte Änderungen anzufordern, statt blind neu generieren zu lassen.

Was ist das beste KI-Tool für eine 3D-Website?

Für einen einzelnen Effekt oder eine Hero-Section direkt Claude: Du behältst den Quellcode und zahlst pro Token. Für eine gehostete Website mit Backend eignen sich Lovable oder Bolt in ihren Free-Tiers – oder VULK, wenn du gezielt exportierbaren React-Three-Fiber-Code möchtest.

Schadet ein 3D-Hero der Performance oder SEO?

Nur wenn du es zulässt. Beschränke das 3D auf eine Szene, ergänze die mobilen Leitplanken von oben und halte Überschrift und Fließtext als echtes HTML über dem Canvas, wie es alle sechs Prompts tun. Crawler lesen die Textebene, und die Core Web Vitals hängen vor allem davon ab, was die Seite zusätzlich lädt.