Ein Prompt zu einer 3D-Website in 30 Sekunden (6 getestet)

Die meisten 3D-Website-Prompt-Bibliotheken verlangen entweder Geld für den Prompt-Text selbst oder zeigen dir ein Demo-Video und behalten die Worte für sich. Hier sind sechs vollständige Prompts: Füge sie unverändert in Claude ein oder passe eine Zeile für Lovable, Bolt und Cursor an. Alle sechs wurden durch ein Live-Modell geschickt; fünf kamen als funktionierende Three.js-Seiten zurück, und jeder Screenshot unten ist einer dieser Renderings, kein Mockup.

Sechs 3D-Website-Prompts, die du jetzt sofort kopieren kannst

Jeder Prompt verlangt eine einzelne HTML-Datei mit einer von einem CDN geladenen Three.js. Diese Einschränkung ist wichtig: Eine einzelne Datei lässt sich lokal in jedem Browser öffnen und einfach an einen Entwickler weitergeben oder in einen Custom-Code-Block einfügen, und sie zwingt das Modell dazu, die Szene in sich geschlossen zu halten, statt Importe über ein Projekt zu verteilen.

1. Partikel-Galaxie-Held

Erstelle eine einzelne HTML-Datei mit einem interaktiven 3D-Partikel-Galaxie-Hero-Bereich
unter Verwendung von Three.js (lade es von einem CDN). Anforderungen: etwa 50.000
Partikel, die eine Spiralgalaxie bilden und sich langsam drehen; Partikel-Farben wechseln
vom warmen Bernstein im Kern zu Violett am äußeren Rand; füge OrbitControls hinzu, damit
Besucher per Drag drehen und zoomen können; lege eine zentrierte Hero-Überschrift darüber,
die "Build Beyond Flat" sagt, mit einer kurzen Unterzeile und einer CTA-Schaltfläche; setze
pointer-events: none auf den Overlay-Container und pointer-events: auto auf
die CTA-Schaltfläche, damit die Galaxie hinter dem Text weiter per Drag bewegt werden kann; dunkler
Hintergrund #0a0616; Window-Resize behandeln. Gib NUR die vollständige HTML-
Datei in einem einzigen Codeblock aus.

In 27 Sekunden und 3.692 Output-Tokens generiert. Die Galaxie rotiert, Drag-to-orbit funktioniert, und der Button bleibt durch das Overlay hindurch anklickbar. Ein echter Fehler: Die Unterzeile landet auf dem hellen galaktischen Kern und ist schwer zu lesen. Die Lösung steht in den Testnotizen unten.

2. Scroll-gesteuerte Produktpräsentation

Erstelle eine einzelne HTML-Datei: ein scrollgesteuerter 3D-Produkt-Showcase mit
Three.js, geladen von einem CDN. Anforderungen: ein schwebender Chrome-Torus-Knoten,
zentriert in einer festen Vollbild-Canvas; die Seite hat 4 Vollbild-Scrollabschnitte,
und während der Benutzer scrollt, umkreist die Kamera das Objekt um volle 360
Grad, während die Materialfarbe des Objekts pro Abschnitt sanft übergeht
(Silber, tiefes Blau, Smaragd, Kupfer); jeder Abschnitt zeigt eine Überschrift und
einen einzeiligen Text links über der Canvas angeheftet; sanfte Interpolation (lerp)
beim Scrollen, damit sich die Bewegung gedämpft anfühlt; dunkler Studio-Look mit zwei farbigen
Spotlights und einem weichen Bodenschatten; Größenänderungen behandeln. Gib NUR die vollständige
HTML-Datei in einem einzigen Codeblock aus.

Dies war die aufwendigste der fünf Arbeitsgenerationen (63 Sekunden, 7.023 Ausgabe-Tokens) und das beeindruckendste Ergebnis. Durch Scrollen wird die Kamera um das Objekt herumgeführt, und das Material färbt sich pro Abschnitt genau wie gewünscht um:

Auch die gedämpfte Lerp-Interpolation wurde berücksichtigt; die Bewegung hat das schwere, aufwendige Gefühl einer Agentur-Website statt einer scroll-gekidnappten Diashow.

3. GLSL-Flüssigkeitsverlauf-Hintergrund

Erstelle eine einseitige HTML-Datei mit einem vollbildigen, animierten WebGL-Flüssigkeits-
Gradienten-Hintergrund unter Verwendung eines benutzerdefinierten GLSL-Fragment-Shaders mit Three.js, geladen
von einem CDN. Anforderungen: langsam bewegte organische Blobs, die tiefes Blau,
Lila und Koralle miteinander verschmelzen, gesteuert von einer Zeit-Uniform und simplexartigem Rauschen im
Fragment-Shader; füge dem Shader ein dezentes Filmkorn hinzu; überlagere eine zentrierte
Glass-Karte (Backdrop-Blur) mit einer weißen Überschrift "Ship Immersive Sites", einer
Unterzeile und zwei Buttons; die Animation muss auf einem Laptop flüssig bleiben (einzelnes
Quad, keine Postprocessing-Pässe); Größenänderung behandeln. Gib NUR die vollständige
HTML-Datei in einem einzelnen Codeblock aus.

31 Sekunden, 3.830 Tokens, Bestehensrate beim ersten Versuch. Die Zeile "single quad, no postprocessing passes" ist die Leistungsgrenze: Ohne sie greifen Modelle oft zu EffectComposer und Bloom-Pässen, die die Bildrate auf integrierten GPUs in den Keller ziehen.

4. 3D-Portfolio-Fly-through (das, das sich gewehrt hat)

Erstelle eine einzelne HTML-Datei: ein 3D-Portfolio mit Three.js von einem CDN.
Sechs schwebende Projektkarten (abgerundete Flächen mit Platzhalter-Gradienten-
Texturen und auf die Karten-Textur gerenderten Projekttiteln), angeordnet entlang
einer sanften Kurve im 3D-Raum. Wenn der Nutzer scrollt, fliegt die Kamera vorwärts
entlang der Kurve und bringt jede Karte nacheinander einzeln in den Fokus; die Kamera
muss die fokussierte Karte vollständig mit bequemem Rand im Bild halten und niemals
durch eine Karte hindurchgehen; die fokussierte Karte skaliert sich leicht hoch.
Benachbarte Karten bleiben für mehr Tiefe teilweise sichtbar. Füge subtilen Nebel,
einen dunklen Hintergrund und gedämpfte Scroll-Interpolation hinzu. Ein Klick auf
eine fokussierte Karte öffnet einen Link. Beim Ändern der Fenstergröße anpassen.
Halte den Code kompakt: eine wiederverwendete Karten-Erstellungsfunktion, keine Kommentare.
Gib NUR die vollständige HTML-Datei in einem einzigen Codeblock aus.

Dieser hier brauchte drei Durchläufe und ist trotzdem noch nicht auslieferbar, und der Screenshot oben zeigt, warum wir ihn trotzdem veröffentlichen: Die Karte wird gerendert, aber die Kamera sitzt dahinter, sodass der Titel spiegelverkehrt erscheint. Beim ersten Durchlauf wurde unser 16.000-Token-Ausgabelimit mitten in der Datei überschritten. Der zweite Durchlauf (mit der Zeile „keep the code compact“, weshalb diese Zeile im Prompt steht) renderte Karten, ließ die Kamera aber direkt durch sie hindurchfliegen. Der dritte Durchlauf behob das Clipping und verlor die Scroll-Kopplung der Kamera. Die Choreografie der Kamerafahrt plus Texturen pro Karte ist für Modelle wirklich schwieriger als die Szenen oben; plane ein Debugging-Session ein oder vereinfache auf ein statisches, gebogenes Raster mit Hover-Zuständen.

5. Interaktiver Produkt-Viewer

Erstellen Sie eine einzelne HTML-Datei: einen interaktiven 3D-Produktviewer mit
Three.js von einem CDN. Zentrieren Sie ein stilisiertes, drahtgitterfreies geometrisches Produkt-
Platzhalterobjekt (ein abgeschrägter Würfel oder eine Kapsel) auf einem Sockel. Rechte Seitenleiste mit
drei Farbfeldern und einem Metall/Matt-Schalter, die das Material live aktualisieren;
OrbitControls auf die horizontale Rotation beschränkt; weiche dreipunktige Studio-
Beleuchtung und ein Kontaktschatten. Halten Sie das Panel als einfaches HTML/CSS, das die
Canvas überlagert. Größenänderungen behandeln. Geben Sie NUR die vollständige HTML-Datei in einem einzigen Code-
block aus.

Bestanden im ersten Versuch, 66 Sekunden, 7.719 Tokens. Farbmuster und der Metall-/Matt-Schalter aktualisieren das Material live, und das Modell fügte eine unaufgeforderte Nettigkeit hinzu: eine Fußnote, die erklärt, dass die Drehung auf die horizontale Achse gesperrt ist, damit das Produkt im Bild bleibt.

6. Einseitige 3D-Geschäftswebsite

Erstellen Sie eine einzelne HTML-Datei: eine einseitige Website für ein Designstudio mit
Three.js von einem CDN. Abschnitte: Hero, Services, Work, Kontakt. Eine einzige
abstrakte Low-Poly-Form schwebt oben rechts im Hero-Bereich und rotiert langsam;
während der Nutzer durch jeden Abschnitt scrollt, verändert die Form ihre Skalierung und Farbe
, um zum Akzent des jeweiligen Abschnitts zu passen. Die Abschnitte verwenden ansonsten sauberes HTML/CSS
(kein schweres 3D pro Abschnitt), damit die Seite schnell bleibt. Sanftes Scrollen, für Mobilgeräte
geeignet, Resize verarbeiten. Geben Sie NUR die vollständige HTML-Datei in einem einzelnen
Codeblock aus.

62 Sekunden, 7.419 Tokens. Das Modell erfand einen Studi namen, erstellte die vier Abschnitte und platzierte ein niedrigpolyedrisches Ikosaeder genau dort, wo verlangt. Unser erster Versuch mit diesem Prompt stieß an eine 8.000-Token-Ausgabeobergrenze und kam abgeschnitten an — wenn Sie ein Modell über eine API aufrufen, setzen Sie das Ausgabelimit für Full-Page-Prompts auf 16.000 Tokens oder mehr.

Was geschah, als wir sie ausführten

Drei Durchläufe auf einem Modell pro Prompt sind eine Anekdote, kein Benchmark; verstehen Sie es als Stichprobe dafür, wo die Prompt-zu-3D-Generierung Mitte 2026 steht. Methodische Hinweise: claude-sonnet-5 über seine API am 17. Juli 2026, Standardeinstellungen, kein System-Prompt, Ergebnisse in Desktop-Chrome bei 1280×720 auf einem Apple-Silicon-MacBook gerendert; in den erfolgreichen Durchläufen wählte das Modell den Three.js-r128-UMD-Build von einem öffentlichen CDN eigenständig aus.

Der eine visuelle Fehler unter den fünf funktionierenden Seiten: Die Unterzeile von Prompt 1 liegt auf dem hellsten Teil der Galaxie und wird dadurch nahezu unlesbar. Eine nachfolgende Zeile hat das behoben — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. Das ist das Muster in diesen Durchläufen: Die 3D-Szene selbst kommt in der Regel richtig heraus, und das Iterationsbudget fließt in Typografie, Overlay-Kontrast und (im Portfolio-Fall) Kamerachoreografie.

Kosten sind in diesem Maßstab kein Thema. Der vollständige Testlauf — neun Generationen einschließlich der Portfolio-Wiederholungen, etwa 46.000 Output-Tokens — kostete deutlich unter einen Dollar; wir haben ihn über AIReiter ausgeführt, das den Zugriff auf die Claude API zu einem Fünftel des offiziellen Preises pro Token weiterverkauft, sodass selbst eine hartnäckige Iterationssitzung im Bereich von Kleingeld bleibt.

Wie man Ihren eigenen 3D-Website-Prompt schreibt

Die Prompts, die bestanden haben, teilen fünf Teile. Behalten Sie alle fünf bei, und Ihre Chancen auf ein Bestehen beim ersten Versuch steigen deutlich.

1. Ein einzelnes Szenenmotiv. Eine Galaxie, ein Torus-Knoten, ein Gradientenfeld. In unseren Läufen und in den meisten geteilten Community-Beispielen beginnen Modelle dort Anforderungen fallen zu lassen, wo Prompts mehrere voneinander unabhängige 3D-Elemente auf einer Seite verlangen. 2. Ein Bewegungsantrieb. Entweder Zeit (slowly rotates, driven by a time uniform) oder Scrollen (as the user scrolls, the camera orbits). Nenne ausdrücklich, welches von beiden; „animated“ allein lässt das Modell etwas Langweiliges wählen. Hinweis aus dem Portfolio-Fehlschlag: Das Scrollen eines *Objekts* ist zuverlässig, das Scrollen einer *Kamera entlang eines Pfads zwischen Objekten* ist der Punkt, an dem es scheitert. 3. Die Interaktion. OrbitControls für Drag-to-Rotate hat in jedem erfolgreichen Lauf unseres Tests funktioniert. Wenn du Text über das Canvas legst, fordere für den Overlay-Container pointer-events: none und für Buttons pointer-events: auto an — sonst frisst die Textebene die Zieh- und Klickaktionen, die für die Szene gedacht sind. 4. Der Overlay-Inhalt. Gib den exakten Überschriftentext in Anführungszeichen an. Modelle füllen nicht spezifizierten Text mit generischen Slogans, die du ohnehin ersetzen musst. 5. Leistungs- und Größen-Grenzwerte. Partikelanzahl, single quad, no postprocessing oder low-poly hält die Seite schnell; keep the code compact hält die Ausgabe innerhalb der API-Token-Grenzen — zwei unserer neun Läufe sind an einem Ausgabelimit gestorben, bevor irgendein Problem mit der Codequalität auftauchte.

Vokabular, das das Modell in Richtung echter 3D statt einer flachen CSS-Imitation lenkt: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Die Begriffe sind wichtig, weil sie auf echte API-Namen verweisen, sodass das Modell gegen Bibliotheken schreibt, die es im Training gesehen hat, statt zu improvisieren.

Die Code-Einfügen-Tastenkombination

Für Effekte, die über das hinausgehen, was Sie beschreiben können, gibt es eine zweite Technik. Suchen Sie auf CodePen nach einem fertigen Three.js-Effekt, fügen Sie den Rohcode in Ihr KI-Tool ein und geben Sie nur Add this 3D animation to the hero. an. Das Modell übersetzt den Ausschnitt in Ihren Stack — React-Komponenten, Ihr Build-Setup, Ihre Abschnittsstruktur — also genau den Teil, der normalerweise mühsam ist. Builder.io hat den Trick mit einer Animation eines Planeten mit 50.000 Partikeln dokumentiert, einschließlich des gleichen pointer-events: none-Layering-Fixes, in ihrer Anleitung.

Dies ist der Pfad mit der höchsten Hebelwirkung, wenn du Auszeichnungsseiten-Politur willst: Die Shader-Mathematik stammt von einem Menschen, der sie abgestimmt hat, und die AI übernimmt nur die Integration.

Welche Tools nehmen diese Prompts an

Die sechs oben genannten Prompts sind tool-agnostisch; alles, was HTML/JS schreibt und in der Vorschau anzeigt, kann sie ausführen. Die Unterschiede zwischen den Tools liegen in der Ausgabeform und der Code-Eigentümerschaft (geprüft am 17. Juli 2026):

Zwei davon verdienen eine Anmerkung. VULKs Versprechen ist, dass es echten React Three Fiber-Code generiert — interaktive WebGL-Szenen statt eines sich wiederholenden Video-Headers — und seine Showcase-Sites untermauern das. Echte Code-Ausgabe statt eines Video-Headers ist genau der Unterschied, den man prüfen sollte, bevor man für irgendeinen „AI 3D website builder“ bezahlt. Und wenn Sie lieber Prompts durchsuchen als sie selbst zu schreiben, pflegt MotionSites eine kategorisierte Bibliothek für Lovable, Bolt, Cursor und Claude. Ein Teil ist kostenlos zum Kopieren, der Rest steckt hinter einem Abonnement:

Wo Prompts an ihre Grenzen stoßen

Eine wiederkehrende Frage in r/lovable- und r/web_design-Threads ist, ob der richtige Prompt Websites wie mont-fort.com oder die Labs-Seiten von Noomo Agency nachbilden kann. Ehrliche Antwort: nicht allein mit einem Prompt. Diese Seiten basieren auf benutzerdefinierten GLTF-Modellen, art-directetem Lighting und maßgeschneiderter Shader-Arbeit — Assets, die ein Text-Prompt nicht herbeizaubern kann. Was ein Prompt liefert, ist die *Mechanik* dieser Seiten (scroll-gesteuerte Kameras, Shader-Hintergründe, gedämpfte Bewegung) mit Platzhaltergeometrie. Das Einsetzen einer echten Modelldatei schließt einen Teil dieser Lücke, aber Lighting, Materialien und mobile Fallbacks bleiben weiterhin echte Designarbeit. Unser oben gezeigter Fehlschlag beim Portfolio-Fly-through ist dieselbe Lektion im Kleinen: Je näher ein Prompt an choreografierte Szenen mit mehreren Objekten herankommt, desto mehr menschliche Iteration erfordert es.

Drei Fehlermodi decken die meisten fehlerhaften Generierungen ab, jeweils mit einer einzeiligen Lösung:

• Schwarzer Bildschirm, keine Fehler sichtbar. Meist ein Mismatch zwischen ES-Modul und CDN-Import. 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 ohne Aufforderung ausgewählt haben, und sie funktioniert weiterhin; neuere Three.js-Versionen haben den UMD-Pfad entfernt, daher vermeidet das Festpinnen den Mismatch.)
• Auf dem Desktop flüssig, auf dem Smartphone ruckelig. Partikelzahlen, die auf einem Laptop noch in Ordnung waren. Fix-Prompt: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• 3D-Szene funktioniert, aber nichts auf der Seite ist anklickbar. Das Canvas oder ein Overlay fängt Ereignisse ab. Fix-Prompt: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

Und einer aus unseren eigenen Läufen: Text auf einer 3D-Karte wird gespiegelt dargestellt. Die Kamera blickt auf die Rückseite der Ebene. Fix-Prompt: Kartenelemente beidseitig mit korrekt gespiegelter Textur machen oder Karten so drehen, dass sie immer zur Kamera zeigen.

FAQ

Gibt es kostenlose 3D-Website-Prompts?

Ja. Die sechs in diesem Beitrag sind vollständig und frei zu kopieren, und DocsBot sowie die kostenlose Stufe von MotionSites bieten mehr. Bezahlte Bibliotheken kaufen Ihnen vor allem Umfang und vorab getestete Vielfalt, nicht eine andere Art von Prompt.

Funktionieren diese Prompts in Lovable oder Bolt?

Ja, mit einer Anpassung: Lass die Anforderung „single-file HTML“ weg, da diese Plattformen React-Projekte erstellen. Alles andere — das Szenenmotiv, der Bewegungsantrieb, die Interaktion und die Performance-Leitplanke — lässt sich direkt übernehmen.

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

Nein für das Generieren, ein wenig für das Iterieren. Die obigen Prompts enthalten das notwendige Three.js-Vokabular. Zu wissen, was OrbitControls oder ein Fragment-Shader ist, hilft Ihnen, präzise Änderungen anzufordern, statt blind neu zu generieren.

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

Für einen einzelnen Effekt oder einen Hero-Bereich direkt mit Claude: Du behältst den Quellcode und zahlst pro Token. Für eine gehostete Website mit Backend: Lovable oder Bolt in ihren kostenlosen Tarifen, oder VULK, wenn du speziell exportierten React Three Fiber-Code möchtest.

Wird ein 3D-Hero die Leistung oder SEO beeinträchtigen?

Nur wenn du es zulässt. Beschränke 3D auf eine Szene, füge die mobilen Leitplanken oben hinzu und behalte deine Überschrift und den Fließtext in echtem HTML über dem Canvas, wie es alle sechs Prompts tun. Crawler lesen die Textebene, und die Core Web Vitals hängen hauptsächlich davon ab, was die Seite sonst noch lädt.