Web-3D-Viewer für B2B auswählen: Kriterien und Einbindung per iFrame oder JavaScript

Ein 3D-Modell des eigenen Produkts existiert bereits oder ist geplant, jetzt soll es auf die Website. Wer an diesem Punkt einen Web-3D-Viewer auswählen will, steht vor zwei Fragen: Welcher Viewer bringt die nötige Qualität und Funktionalität mit? Und wie kommt er technisch auf die Seite, per iFrame oder per JavaScript-Einbindung? Dieser Artikel beantwortet beide Fragen aus der Praxis, mit klaren Kriterien und einem ehrlichen Vergleich der beiden Einbindungswege.

Was ist ein Web-3D-Viewer?

Ein Web-3D-Viewer ist eine Software-Komponente, die interaktive 3D-Modelle direkt im Browser darstellt: drehen, zoomen, erkunden, auf Desktop, Tablet und Smartphone, ohne App und ohne Plugin. Technische Basis ist in der Regel das Format glTF 2.0, gerendert über die Grafikschnittstellen des Browsers. Für den grundsätzlichen Einstieg, was 3D auf der eigenen Website bewirkt, empfiehlt sich unser Überblicksartikel für Entscheider.

Die Auswahlkriterien im Überblick

Viewer unterscheiden sich weniger in der Grundfunktion (Modell drehen kann jeder) als in Qualität, Robustheit und dem, was um das reine Anzeigen herum passiert.

Rendering-Qualität und Fallback. Aktuelle Viewer nutzen WebGPU, die neueste Grafik-Generation im Browser, für realistische Reflexionen, weiche Schatten und Studio-Beleuchtung. Wichtig ist der automatische Fallback auf WebGL für ältere Geräte. Ein Viewer, der nur auf neuester Hardware gut aussieht, schließt einen Teil der Interessenten aus.

Mobile Performance. Das beste Rendering nützt nichts, wenn das Modell auf dem Smartphone ruckelt oder zehn Sekunden lädt. Entscheidend ist hier weniger der Viewer selbst als die Aufbereitung der CAD-Daten: Polygon-Optimierung, Texturgrößen, Ladeverhalten.

Interaktion. Reicht das Drehen und Zoomen, oder soll das Modell erklären und verkaufen? Relevante Funktionen sind anklickbare Hotspots mit Erklärtexten direkt am Bauteil, Animationen mit Aktions-Buttons ("Tür öffnen", "Explosionsansicht") und Konfigurator-Funktionen für Farben und Varianten.

AR-Fähigkeit. Gute Viewer bringen Augmented Reality ohne App mit: Das Produkt wird per Smartphone in Originalgröße in den realen Raum gestellt, am Desktop führt ein QR-Code aufs Handy. Wie das technisch funktioniert, erklärt unser Artikel zu WebXR.

Schutz der CAD-Daten. Für B2B-Unternehmen oft die kritischste Frage. Das Modell sollte verschlüsselt ausgeliefert werden, und ins Web-Modell gehört nur, was auch ein Foto zeigen würde: die äußere Erscheinung, keine Toleranzen, keine Stücklisten, kein sensibles Innenleben. Absolute Kopiersicherheit gibt es im Browser prinzipiell nicht, umso wichtiger ist die Entscheidung, was überhaupt übertragen wird.

Betrieb und Hosting. Wo liegt das Modell, wer hält den Viewer aktuell, was passiert bei Produktänderungen? Dazu unten mehr.

Einbindung per iFrame: eine Zeile Code

Der iFrame ist der einfachste und robusteste Weg, einen Web-3D-Viewer in eine Website zu bringen. Eine Zeile HTML genügt:

<iframe src="https://viewer.example.com/modell" width="100%" height="600" allow="xr-spatial-tracking; fullscreen"></iframe>

Der Viewer läuft dabei vollständig isoliert vom Rest der Seite. Das hat handfeste Vorteile: Es gibt keine Konflikte mit dem CMS, dem Theme oder anderen Skripten, die Einbindung funktioniert in WordPress genauso wie in TYPO3, Shopify oder einem selbst gebauten System, und die IT des Unternehmens muss nichts installieren und nichts warten. Updates am Modell oder am Viewer werden zentral eingespielt und erscheinen sofort auf der Website, ohne dass dort jemand eingreift. Auch responsives Verhalten und ein helles oder dunkles Theme passend zur Seite sind damit problemlos möglich.

Die Grenze des iFrames: Die umgebende Seite und der Viewer bleiben getrennte Welten. Soll die Website selbst auf Ereignisse im Viewer reagieren, braucht es eine Kommunikationsschnittstelle oder den zweiten Weg.

Einbindung per JavaScript: mehr Kontrolle, mehr Verantwortung

Bei der JavaScript-Einbindung wird der Viewer als Skript oder Web-Komponente direkt in die Seite integriert. Das Modell rendert dann im selben Dokument wie der Rest der Website. Dieser Weg lohnt sich, wenn die Seite eng mit dem 3D-Inhalt verzahnt sein soll: eigene Buttons außerhalb des Viewers, die Kamerafahrten auslösen, Scroll-Animationen, bei denen sich das Modell mit dem Seiteninhalt bewegt, oder eine tiefe Integration in eine bestehende Web-Anwendung.

Der Preis dafür ist Verantwortung: Das Skript muss zur restlichen Seite passen, Versionen müssen gepflegt werden, Content-Security-Policies und Ladereihenfolgen wollen beachtet sein, und bei einem Relaunch der Website wandert die Integration mit um. Was beim iFrame die Ausnahme ist (Abstimmung mit der IT), ist hier der Normalfall.

Selbst betreiben oder betreiben lassen?

Neben Viewer und Einbindung entscheidet ein dritter Punkt über die langfristigen Kosten: der Betrieb. Wer den Viewer selbst hostet, verantwortet Server, Browser-Kompatibilität, Modell-Updates und die Aufbereitung neuer CAD-Stände. Bei einem betreuten Modell übernimmt das ein Dienstleister, das Unternehmen bindet nur den iFrame ein. Der typische Weg sieht dann so aus:

Fazit: Erst Kriterien klären, dann Technik entscheiden

Einen Web-3D-Viewer auswählen heißt, in dieser Reihenfolge zu denken: erst die Anforderungen (Darstellungsqualität, Interaktion, AR, CAD-Schutz), dann der Betrieb (selbst oder betreut), zuletzt die Einbindung. Die gute Nachricht: Die Einbindung ist der einfachste Teil. Mit dem iFrame ist jede moderne Website in wenigen Minuten 3D-fähig, ganz ohne Projekt für die eigene IT.

Wie ein betreuter Viewer vom CAD-Modell bis zur fertigen Einbettung aussieht, zeigt die Seite zum Web-3D-Viewer. Für Fragen zu Ihrem konkreten Produkt steht das Kontaktformular bereit.