3D-Websites: Wann sie sich lohnen und wie sie schnell bleiben

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, 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?

WebGL läuft in jedem modernen Browser. WebGPU 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 listet die Bedienelemente, die nicht-visuellen Entsprechungen und die bekannten Grenzen auf. Ziel ist WCAG 2.2 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, liefern Sie sie im Format glTF aus und behalten Sie einen unkomprimierten Fallback, wenn Sie sich auf neuere Browserfunktionen wie 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, 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.

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 beschreiben.

Wie Dardo 3D-Websites baut

Wir gestalten und entwickeln 3D-Erlebnisse im Rahmen unserer Leistung interaktive 3D-Websites und leichtere Motion- und Scroll-Arbeit über Creative Development. Für 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.