3D-Hintergrund für die Website — Wirkung ohne Ladezeit-Frust.
Ein bewegter 3D-Hintergrund im Kopfbereich macht aus einer normalen Website etwas, das hängen bleibt — wenn er gut gemacht ist. Schlecht gemacht, frisst er Akku, ruckelt auf dem Handy und verzögert den Moment, in dem Besucher den Text lesen können. Hier steht, wie die gute Variante aussieht.
Ein guter 3D-Hintergrund ist leicht (kein großes Modell, wenige Kilobyte Code), pausiert, wenn er nicht sichtbar ist, begrenzt die Auflösung auf hochauflösenden Displays, respektiert „Bewegung reduzieren“ und hat ein statisches Ersatzbild. Der Text darüber bleibt normales HTML — dann schadet der Effekt weder Lesbarkeit noch SEO.
Welche Arten es gibt.
| Art | Beschreibung | Gewicht |
|---|---|---|
| Partikel | Tausende Punkte, die schweben, auf die Maus reagieren oder Formen bilden | Sehr leicht |
| Shader-Verlauf | Fließende Farben, Wellen, Nebel — komplett auf der Grafikkarte berechnet | Sehr leicht |
| Abstrakte 3D-Form | Eine glänzende Kugel, ein Gitter, ein Knoten, der sich dreht | Leicht |
| Produkt oder Objekt | Das eigene Produkt schwebt im Kopfbereich | Mittel, abhängig vom Modell |
| Szene | Landschaft, Raum, Stadt | Schwer — besser als Scroll-Story |
Die ersten drei Arten kommen ohne heruntergeladenes Modell aus: Alles entsteht aus ein paar Kilobyte Code. Deshalb sind sie für den Kopfbereich meist die bessere Wahl. Soll das Produkt im Mittelpunkt stehen, ist eine eigene Sektion oder eine Scroll-Animation oft sinnvoller als der Hintergrund.
Wann er wirkt — und wann er stört.
Ein Hintergrund wirkt, wenn er zur Marke passt und die Botschaft unterstützt: Partikel für Technologie und Daten, fließende Formen für Kreativität, ein Gitter für Präzision. Er stört, wenn er den Text überstrahlt, wenn er so auffällig ist, dass niemand mehr liest, oder wenn er jede Unterseite gleichermaßen belegt. Faustregel: Der Hintergrund soll man nach zehn Sekunden nicht mehr bewusst wahrnehmen — aber vermissen, wenn er fehlt. Beispiele aus der Praxis: 3D-Website-Beispiele.
Schnell bleiben.
- Kein Warten auf 3D: Text und Bild laden zuerst, der Effekt kommt danach dazu. Three.js asynchron laden.
- Auflösung begrenzen: Auf Displays mit hoher Pixeldichte muss nicht in voller Auflösung gerechnet werden. Eine Obergrenze von 1,5 bis 2 spart viel Rechenzeit, ohne sichtbaren Unterschied bei weichen Effekten.
- Pausieren, wenn unsichtbar: Hat der Besucher weitergescrollt oder den Tab gewechselt, gibt es keinen Grund, weiterzurechnen.
- Wenige Draw-Calls: Tausende Partikel als ein einziges Objekt zeichnen, nicht als tausend einzelne.
- Kein Schatten, kein Post-Processing ohne guten Grund.
Die ausführliche Liste: Three.js Performance optimieren.
Die wichtigsten Schalter im Code.
const canvas = document.querySelector('#hero-canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: false, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)); // Obergrenze
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let visible = true;
// Pausieren, wenn der Hero nicht im Bild ist
new IntersectionObserver(([e]) => { visible = e.isIntersecting; }).observe(canvas);
document.addEventListener('visibilitychange', () => { visible = !document.hidden; });
function tick(t) {
requestAnimationFrame(tick);
if (!visible) return;
if (!reduce) points.rotation.y = t * 0.00005; // Bewegung nur ohne „reduzieren“
renderer.render(scene, camera);
}
requestAnimationFrame(tick);Mit aktivierter Einstellung „Bewegung reduzieren“ im Betriebssystem bleibt die Szene stehen, wird aber trotzdem gezeigt. Alternativ nur ein einzelnes Bild rendern.
Handy und Akku.
Auf Handys hat die Grafikkarte weniger Leistung und der Akku ist begrenzt. Bewährt hat sich, auf kleinen Bildschirmen weniger Partikel zu zeigen, die Bildrate bei ruhigen Effekten auf 30 Bilder pro Sekunde zu begrenzen und auf sehr alten Geräten nur ein statisches Bild zu zeigen. Ob WebGL überhaupt verfügbar ist, lässt sich vorher prüfen — wenn nicht, bleibt einfach das Ersatzbild stehen. Nichts ist schlimmer als ein leerer Kopfbereich.
SEO und Lesbarkeit.
Ein 3D-Hintergrund schadet dem Ranking nicht, solange Überschrift und Text normales HTML sind — Google liest den Text, nicht das Canvas. Kritisch wird es bei der Ladezeit: Verzögert der Effekt, dass die Überschrift erscheint, leidet der Messwert für die größte sichtbare Fläche. Deshalb Text zuerst, 3D danach. Für die Lesbarkeit braucht der Text genug Kontrast zum Hintergrund, notfalls mit einer halbtransparenten Fläche dahinter. Bewegung direkt hinter dem Text erschwert das Lesen, besser lebt der Effekt an den Rändern.
In WordPress einbauen.
In WordPress wird der Effekt als kleiner Block, als Shortcode oder direkt im Theme eingebunden. Wichtig: Three.js und das eigene Skript nur auf den Seiten laden, auf denen der Effekt läuft, und Optimierungs-Plugins so einstellen, dass sie die Module nicht zusammenfassen oder verzögern. Die Details: Three.js in WordPress einbinden, Gutenberg-Block für 3D und 3D in Elementor.
Wenn du Unterstützung brauchst.
Ich baue Hero-Effekte und 3D-Hintergründe, die zur Marke passen und auf dem Handy flüssig bleiben — wie auf dieser Seite. Einen Überblick über alle Themen gibt die Seite 3D-Webentwicklung, Preisrahmen stehen unter 3D-Konfigurator: Kosten.
Wer das schreibt.
Ich bin Manuel Killert, Web- und 3D-Entwickler aus Quakenbrück. Ich baue interaktive 3D-Anwendungen mit Three.js und Blender — Produktkonfiguratoren, Explosionsansichten, digitale Zwillinge und Scroll-Storys — und bringe sie in WordPress und WooCommerce. Die Live-Demos unten habe ich selbst gebaut, vom Blender-Modell bis zum fertigen Viewer im Browser. Die Probleme in diesem Ratgeber kenne ich deshalb nicht aus der Theorie, sondern aus eigenen Projekten.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — 3D-Hintergrund für die Website.
Macht ein 3D-Hintergrund die Website langsam?
Nicht zwingend. Partikel, Shader-Verläufe und abstrakte Formen kommen mit wenigen Kilobyte Code aus. Wichtig ist, dass Text zuerst lädt, die Auflösung begrenzt wird und der Effekt pausiert, wenn er nicht sichtbar ist.
Schadet ein 3D-Hintergrund dem SEO?
Nein, solange Überschrift und Text normales HTML sind. Kritisch ist nur, wenn der Effekt das Erscheinen der Überschrift verzögert und damit die Ladezeit-Messwerte verschlechtert.
Was ist prefers-reduced-motion?
Eine Einstellung im Betriebssystem, mit der Menschen weniger Bewegung wünschen, etwa wegen Schwindel. Websites können sie auslesen und Animationen dann anhalten oder vereinfachen.
Welche Art 3D-Hintergrund ist am leichtesten?
Partikel und Shader-Verläufe, weil sie ohne heruntergeladenes Modell auskommen und komplett auf der Grafikkarte berechnet werden.
Wie verhält sich der Effekt auf dem Handy?
Gut gemacht mit weniger Partikeln, begrenzter Auflösung und Bildrate. Auf sehr alten Geräten oder ohne WebGL wird ein statisches Ersatzbild gezeigt.
Kann ich einen 3D-Hintergrund in WordPress nutzen?
Ja, als Block, Shortcode oder im Theme. Three.js sollte nur auf den betroffenen Seiten geladen und von Optimierungs-Plugins nicht zusammengefasst werden.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de