--- title: "3D-Website: Wann sie sich lohnt und wie sie schnell bleibt" description: "3D-Website: wann sie sich lohnt, 3D, Video oder Bilder, und wie wir die zehn 3D-Welten von Janus Observatory schnell und ohne WebGL nutzbar hielten." url: "https://dardo.studio/de/blog/3d-website/" language: "de" translations: {"en":"https://dardo.studio/en/blog/3d-websites/","es":"https://dardo.studio/es/blog/paginas-web-3d/","fr":"https://dardo.studio/fr/blog/sites-web-3d/","it":"https://dardo.studio/it/blog/siti-web-3d/","pt":"https://dardo.studio/pt/blog/sites-3d/","nl":"https://dardo.studio/nl/blog/3d-websites/","sv":"https://dardo.studio/sv/blogg/3d-webbplatser/","pl":"https://dardo.studio/pl/blog/strony-internetowe-3d/","uk":"https://dardo.studio/uk/blog/3d-websites/","ru":"https://dardo.studio/ru/blog/3d-websites/","ar":"https://dardo.studio/ar/blog/3d-websites/","hi":"https://dardo.studio/hi/blog/3d-websites/","th":"https://dardo.studio/th/blog/3d-websites/","ja":"https://dardo.studio/ja/blog/3d-websites/","ko":"https://dardo.studio/ko/blog/3d-websites/","zh-Hans":"https://dardo.studio/zh-Hans/blog/3d-websites/","zh-Hant":"https://dardo.studio/zh-Hant/blog/3d-websites/"} updated: "2026-10-13T01:01:41.632Z" --- [Blog](https://dardo.studio/de/blog/) # 3D-Websites: Wann sie sich lohnen und wie sie schnell bleiben Wann sich eine 3D-Website lohnt, wann Video oder Bilder besser sind und wie die zehn 3D-Welten von Janus Observatory schnell, barrierefrei und nutzbar blieben. Von [Nicolás Cerón](https://dardo.studio/de/studio/) ·12\. Oktober 2026 ![Das Innere eines alten Planetariums bei Nacht: Ein Sternprojektor aus Messing wirft bernsteinfarbene Lichtpunkte auf eine marineblaue Kuppel, und darüber schwebt ein kleiner, facettierter, purpurroter Planet.](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp) ## Das Wichtigste in Kürze - 3D lohnt sich, wenn das Thema räumlich ist oder wenn das Erkunden etwas erklärt, was ein Bild nicht kann; andernfalls funktionieren Bilder oder Video meist besser. - Bauen Sie die Seite so, dass sie ohne WebGL funktioniert, und behandeln Sie die 3D-Ebene als Erweiterung; so bleiben Texte und Daten auch für Suchmaschinen lesbar. - Bei Janus Observatory senkten gzip-Varianten die Übertragung von 59 3D-Modellen von 15,8 MB auf 8,2 MB, mit den Originalen als Fallback. - Legen Sie Budgets für JavaScript und Modellgewicht fest, bevor modelliert wird, und prüfen Sie sie bei jedem Release. - Begrenzen Sie das Pixelverhältnis, respektieren Sie reduzierte Bewegung, geben Sie jeder Interaktion einen Weg per Tastatur und testen Sie auf echten Mittelklasse-Smartphones. ## Die kurze Antwort Eine 3D-Website lohnt sich, wenn das Thema räumlich ist oder wenn die Bewegung durch den Raum etwas erklärt, was ein Bild nicht kann: ein Produkt, das man drehen möchte, ein Ort, ein Datensatz, eine Welt. Sie lohnt sich nicht, wenn sie nur eine Seite dekoriert, die ein Foto oder ein kurzes Video genauso gut erklären würde. So oder so hat die 3D-Ebene echte Kosten bei Downloadgröße, Akkulaufzeit und Barrierefreiheit. Bauen Sie die Seite deshalb so, dass sie ohne 3D funktioniert, und behandeln Sie das 3D als Erweiterung. Dieser Leitfaden stützt sich auf zwei unserer eigenen Projekte: [Janus Observatory](https://dardo.studio/de/referenzen/janus-observatory-webdesign-case-study/), ein Browser-Erlebnis mit zehn 3D-Welten, und dardo.studio, dessen Startseite mit einer Echtzeit-3D-Szene beginnt. ## Wann 3D seinen Platz verdient - **Besucher müssen etwas aus mehr als einem Blickwinkel sehen:** ein Produkt, ein Gebäude, ein Gerät. - **Der Raum ist die Geschichte:** eine Karte, ein Lageplan, eine Reise durch verschiedene Orte. - **Interaktion erklärt ein System** schneller als Text, etwa beim Vergleichen von Szenarien oder beim Erkunden von Daten. - **Das Markenerlebnis ist das Produkt:** Launches, Ausstellungen und Kampagnen, bei denen Atmosphäre zählt und Besucher erwarten, etwas zu erkunden. ## Wann nicht - Die 3D-Szene wiederholt, was eine Überschrift und ein Bild bereits sagen. - Die meisten Besucher kommen mit Mittelklasse-Smartphones über mobile Daten und brauchen schnell eine einzige Information, etwa einen Preis, eine Adresse oder Öffnungszeiten. - Niemand im Team wird Modelle, Code und Fallbacks nach dem Launch pflegen. ## 3D, Video oder Bilder? | Option | Gut für | Worauf Sie achten sollten | | --------------------------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------- | | Echtzeit-3D mit WebGL oder WebGPU | Erkunden, Drehen, Vergleichen, Reagieren auf Eingaben | Gewicht von Modellen und Code, GPU-Last, Aufwand für Barrierefreiheit, Browsertests | | Video | Eine Abfolge oder Atmosphäre jedes Mal gleich zeigen | Dateigröße, Autoplay-Regeln, Untertitel, keine Interaktion | | Bilder oder eine kurze Animation | Eine Sache schnell erklären | Weniger einprägsam; lässt sich nicht erkunden | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) läuft in jedem modernen Browser. [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) ist neuer und für manche Aufgaben schneller, doch die Unterstützung ist noch uneinheitlich, planen Sie also einen Fallback ein. Der 3D-Einstieg auf dardo.studio versucht zuerst WebGPU und weicht auf WebGL 2 aus, während die Seiten zu Leistungen, Referenzen und Kontakt schlichtes HTML sind, das nie auf eine 3D-Szene wartet. ## Was wir beim Bau von Janus Observatory gelernt haben Janus Observatory macht aus zehn veröffentlichten Szenarien für die Zukunft der Erde eine Geschichte in 17 Kapiteln, einen Atlas und ein Observatorium, mit zehn eigens gestalteten Low-Poly-Welten und einem beweglichen außerirdischen Astronomen. Es läuft auf dem kostenlosen Tarif von Cloudflare Workers, der die Größe der Anwendung begrenzt. Der Release-Bericht des Projekts vom 27. September 2026 hält fest, was nötig war, um es schnell zu halten: - **Modelle komprimieren und einen Fallback behalten.** Die 59 3D-Modelle werden als gzip-Varianten mit insgesamt 8,2 MB statt 15,8 MB ausgeliefert, 47,9 % weniger Download. Browser, die sie nicht dekomprimieren können, erhalten die Originaldateien. - **Abseits des Main Threads dekodieren, dann aufhören.** Das Meshopt-Decoding läuft in einem einzigen Hintergrund-Worker, der sich nach fünf Sekunden Leerlauf beendet. - **Ein JavaScript-Budget festlegen und durchsetzen.** Das initiale JavaScript der Startseite umfasst 197.059 Byte (gzip) bei einem Budget von 256.000 Byte, und der Build prüft das. - **Auf Request-Stürme achten.** Eine spekulative Prefetch-Schleife im Stack aus Next.js und OpenNext löste in einem fehlgeschlagenen Browser-Trace 11.704 Requests aus. Die Lösung war, das Prefetching für diese Links abzuschalten, und die Tests verlangen jetzt null spekulative Requests. - **Die Auflösung festlegen, statt Bildraten hinterherzujagen.** Die Canvases rendern mit einem festen Device Pixel Ratio von 1 bis 1,5. Der Bericht zog außerdem eine frühere Bildraten-Angabe zurück, die von einer gesenkten Auflösung abhing; deshalb nennen wir keine. ## So bauen, dass es ohne 3D funktioniert Für Janus gilt eine Regel, die alles andere prägt: Das Kernerlebnis muss ohne WebGL und ohne KI funktionieren. Alle zehn Szenario-Datensätze laden bei deaktiviertem JavaScript, die Bedienelemente funktionieren ohne WebGL, und Drehen per Tastatur, sichtbarer Fokus und reduzierte Bewegung wurden mit jeder Funktion mitgebaut. Die [Seite zur Barrierefreiheit](https://janus-observatory.nicocerond.workers.dev/accessibility) listet die Bedienelemente, die nicht-visuellen Entsprechungen und die bekannten Grenzen auf. Ziel ist [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Level AA, geprüft mit automatisierten Tests in Chromium, Firefox und WebKit. Diese Regel hilft auch Suchmaschinen und KI-Assistenten: Texte, Namen und Daten stehen im HTML, nicht in einem Canvas. ## Checkliste für eine schnelle, barrierefreie 3D-Seite 1. **Schreiben Sie die Seite zuerst ohne 3D.** Wenn die HTML-Version keinen Sinn ergibt, wird 3D das nicht reparieren. 2. **Entscheiden Sie, was das 3D erklärt**, und streichen Sie alles, was nur beeindrucken soll. 3. **Legen Sie Budgets fest** für JavaScript, Modellgewicht und Texturgröße, bevor modelliert wird, und prüfen Sie sie im Build. 4. **Komprimieren Sie Modelle** mit Tools wie [meshoptimizer](https://meshoptimizer.org/), liefern Sie sie im Format [glTF](https://www.khronos.org/gltf/) aus und behalten Sie einen unkomprimierten Fallback, wenn Sie sich auf neuere Browserfunktionen wie [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) verlassen. 5. **Laden Sie die Szene nach den Inhalten**, und erst dann, wenn sie gleich ins Bild kommt. 6. **Begrenzen Sie das Pixelverhältnis**, damit hochauflösende Bildschirme nicht viermal so viele Pixel rendern. 7. **Respektieren Sie** [**prefers-reduced-motion**](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion), geben Sie jeder Interaktion einen Weg per Tastatur und stellen Sie neben jeden Canvas eine Textalternative. 8. **Testen Sie auf echten Mittelklasse-Smartphones** und in mehr als einer Browser-Engine und verfolgen Sie nach dem Launch die [Core Web Vitals](https://web.dev/articles/vitals). ## Was es kostet 3D bringt zusätzlich zu Design und Entwicklung Zeit für Modellierung, Optimierung und Tests mit, und die Fallbacks gehören zur Arbeit, sie sind kein Extra. In unseren Angeboten erscheint es als die Zeile „Individuelle Animationen, 3D oder interaktive Daten“ unter den Kostenfaktoren, die wir in unserem Leitfaden zu den [Website-Kosten in Kolumbien](https://dardo.studio/de/blog/website-kosten-kolumbien/) beschreiben. ## Wie Dardo 3D-Websites baut Wir gestalten und entwickeln 3D-Erlebnisse im Rahmen unserer Leistung [interaktive 3D-Websites](https://dardo.studio/de/leistungen/interaktive-3d-websites/) und leichtere Motion- und Scroll-Arbeit über [Creative Development](https://dardo.studio/de/leistungen/creative-development/). Für [Hyper](https://dardo.studio/de/referenzen/hyper/) haben wir mit React Three Fiber eine scrollgesteuerte 3D-Geschichte gebaut, die verstreute Signale zu einem einzigen Kundenprofil zusammenführt. Wenn Sie eine Idee haben, die Raum braucht, um verstanden zu werden, [erzählen Sie uns davon](https://dardo.studio/de/kontakt/?service=interactive-3d-websites). ## Häufige Fragen **Schaden 3D-Websites der Suchmaschinenoptimierung?** Nicht, wenn die Inhalte im HTML stehen. Suchmaschinen lesen Text, Links und strukturierte Daten, nicht das, was in einem Canvas gezeichnet wird. Stellen Sie Namen, Beschreibungen und Daten deshalb in die Seite und nutzen Sie die 3D-Szene, um sie zu ergänzen. **Funktionieren 3D-Websites auf Smartphones?** Das können sie, mit Budgets für Modellgröße und JavaScript, einem begrenzten Pixelverhältnis und Tests auf echten Mittelklasse-Smartphones. Bieten Sie immer eine Version an, die ohne WebGL funktioniert. **Sollte ich WebGL oder WebGPU verwenden?** WebGL läuft in jedem modernen Browser. WebGPU ist neuer und kann schneller sein, doch die Unterstützung ist noch uneinheitlich. Wenn Sie es nutzen, planen Sie einen WebGL-Fallback ein, so wie die Startseite von dardo.studio. **Ist eine 3D-Website barrierefrei?** Sie kann es sein, wenn Barrierefreiheit mit jeder Funktion mitgebaut wird: Tastatursteuerung, sichtbarer Fokus, reduzierte Bewegung und eine Textalternative neben jedem Canvas. Janus Observatory zielt auf WCAG 2.2 Level AA. ## Quellen & weiterführende Literatur Quellen zu dieser Seite, mit weiteren Details der ursprünglichen Herausgeber. - [Janus Observatory: Barrierefreiheit](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev - [MDN: WebGL-API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org - [MDN: WebGPU-API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org - [MDN: DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org - [Khronos Group: glTF](https://www.khronos.org/gltf/) · khronos.org - [meshoptimizer](https://meshoptimizer.org/) · meshoptimizer.org - [W3C: Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) · w3.org - [web.dev: Web Vitals](https://web.dev/articles/vitals) · web.dev [Nicolás Cerón](https://dardo.studio/de/studio/) Nicolás Cerón ist der Gründer von Dardo, einem Studio für Branding, Webdesign und Webentwicklung in Bogotá, Kolumbien. ## Verwandte Artikel - [**Was kostet eine Website in Kolumbien 2026? Echte Preise und was ein Angebot bestimmt**Website-Kosten in Kolumbien: datierte Preise von Anbietern aus Bogotá, jährliche Fixkosten für Domain und Hosting und was ein Angebot wirklich bestimmt.](https://dardo.studio/de/blog/website-kosten-kolumbien/) - [**Von Framer zu Astro migrieren: eine Framer-Website umziehen, ohne Design oder Rankings zu verlieren**Framer hat keinen HTML-Export, der Wechsel zu Astro ist also ein Neuaufbau. Was Sie vorher sichern, was bricht und wie Design, URLs und Rankings bleiben.](https://dardo.studio/de/blog/framer-zu-astro-migrieren/) - [**Von Webflow zu Astro migrieren: eine Webflow-Website umziehen, ohne Inhalte, Design oder Rankings zu verlieren**Webflow zu Astro migrieren: Der Code-Export lässt CMS, Formulare, Suche und Sprachen weg. Was Sie exportieren, was Sie neu bauen und wie Rankings bleiben.](https://dardo.studio/de/blog/webflow-zu-astro-migrieren/) - [**Von WordPress zu Astro migrieren: als Headless CMS oder komplett, ohne Rankings zu verlieren**WordPress zu Astro migrieren: zwei Wege, was Sie exportieren, wie Yoast-Titel, Permalinks und Uploads bleiben und welche WordPress-URLs oft vergessen werden.](https://dardo.studio/de/blog/wordpress-zu-astro-migrieren/) ## Weiterstöbern. - [Leistung · **Interaktive 3D-Websites mit Three.js und WebGL**](https://dardo.studio/de/leistungen/interaktive-3d-websites/) - [Ihr Projekt · **Gespräch starten**](https://dardo.studio/de/kontakt/)