3D Viewer auf Ihrer Website: Einfacher Zugang zu Interaktion, AR und VR

svo, 15. July 2022

3D ohne technische Hürde einbinden

3D-Content auf Websites ist auf jeden Fall ein Eyecatcher. Noch besser, wenn sich 3D-Objekte von Produkten sogar interaktiv nutzen lassen – entweder steuern oder gar in AR oder VR betrachten. Der Weg dahin ist heute mitunter recht einfach – gesetz den Falles, dass Sie bereits über 3D-Objekte Ihrer Produkte verfügen.

Webservices bringen 3D-Content umwegslos auf die Website

Der Vorteil von 3D-Produktansichten im Web liegt auf der Hand: Neben dem Gefühl, selbst die Kontrolle über den Inhalt der Site zu haben, lassen sich Modelle zusätzlich animieren und mit Informationen ergänzen. So lässt sich eine Produkttour erstellen, über die letztlich doch die Benutzer Kontrolle haben. Damit werden aus Betrachtenden Benutzende – und im Sinne das Marketings findet eine vertiefte Aktivierung statt.

Nun scheint 3D erst einmal ein für viele kleinere Unternehmen unerreichbarer Luxus zu sein – ein Buch mit sieben Siegeln, das sich nur Eingeweihten öffnet. Doch hat sich hier in den vergangenen Jahren viel getan: Aus einfachen 3D-Services sind Angebote gewachsen, die so einiges aus Ihrem 3D-Modell herauszuholen vermögen.

Zum einen ist der Import und die Aufbereitung von Modellen sehr einfach geworden – zumindest im Vergleich mit allen anderen am Markt verfügbaren Mitteln. Auf der anderen Seite lassen sich Modelle sehr einfach mit zusätzlichen Funktionen und Informationen ergänzen. Das Resultat ist schliesslich ein in einen Player eingebettetes Modell, das im Browser betrachtet werden kann – gleichzeitig aber auch die Möglichkeit bietet, über Augmented- und Virtual-Reality geeignete Geräte betrachtet zu werden.

Die Grundlage: Wie komme ich zum 3D-Modell

Hier bieten die meisten Anbieter unterschiedliche Möglichkeiten. Wichtig ist immer, dass die Daten nicht mehr parametrisch sind (was vor allem bei Daten aus CAD-Anwendungen der Fall ist). Die Web-Viewer nutzen jeweils Polygon-basierte Formate.

Die gängigsten sind hier sicherlich .fbx oder .obj. Diese Formate funktionieren in den meisten 3D-Anwendungen – und lassen sich oft auch direkt aus Entwicklungssoftware exportieren. Weiter typisch ist auch das .stl-Format – ein vor allem bei Scan-Anwendungen oder im 3D-Druck genutztes Format.

Zumindest este Gehversuche lassen sich so rasch unternehmen.

Aus Modell wird Experience

Die Auswahl an Anbietern vergrössert sich laufend. Je nach Ausgangslage (mit welchen Tools Sie arbeiten – und welcher Art Ihre Modelle sind) gibt es spezialisierte Anbieter. So gibt es Lösungen, die Modelle direkt aus beliebten, kostenlosen 3D-Anwendungen wie Blender heraus weiterverarbeiten. Oder Lösungen, mit denen sich sogar textile Produkte darstellen und simulieren lassen. Das wiederum sind meist kostspielige und auch komplexere Lösungen.

Gute Erfahrungen machen wir jeweils mit sketchfab. Dabei handelt es sich um einen etablierten Service, der über eine breite Anwenderschaft verfügt. Hier lassen sich Objekte unterschiedlichster Art importieren, geringfügig optimieren (zum Beispiel was deren Materialien und Beleuchtung betrifft) und schliesslich mit Effekten oder interaktiven Hotspots versehen.

Ein Teil der Lösung liegt auch im Player für den Content. Dieser ist das eigentlich Wichtige Bestandteil des Angebotes. Wird der Player auf der Site integriert, sind auch schon alle Funktionen zur Steuerung und Betrachtung des Modelles inkludiert. Dazu gehört meist auch die Betrachtung in Augmented- oder Virtual Reality.

Integrieren bedeutet dabei meist lediglich, ein kleines Stück HTML-Code in die Site zu kopieren (Stangenwaren-CMS wie Wordpress-Templates bieten dazu meist sogar entsprechende «Container»). Alternativ stehen normalerweise auch iFrame-Integrationen zur Verfügung – die dann jedoch oft Nachteile in Sachen Responsive Webdesign aufweisen.

Ein typischer Ablauf

Der typische Ablauf von Ihrem Modell bis zur Integration auf der Website sieht wie folgt aus:

  • Erstellen eines Modelles mit entsprechenden PBR-Materialien (physical based rendering Materialien – also entsprechenden Oberflächen Ihrer Modelle)
  • Alternativ Export Ihres Modelles aus Ihrer Entwicklungs-Software – mit unterschiedlichen, den Objektteilen zugeordneten Materialien
  • Import der Daten im jeweiligen Web-Service
  • Anpassen/Neuzuordnen von Materialien falls nötig
  • Austausch der Materialien aus dem Modell-Export (bei Exporten aus Entwicklungs-Software – die Webservices bieten hier meist eine auswahl typischer Materialien)
  • Hinzufügen von Informationen oder Funktionen zum Modell (meist lassen sich Kameras einrichten, Lichtquellen setzen oder vorhandene Animationen mit Steuerungen verknüpfen)
  • Embed-Code (HTML oder iFrame) ausgeben
  • Integration auf Website oder in Webshop (via vorbereitetem HTML- oder iFrame Element/Objekt)

Vor- und Nachteile von Webservices für 3D-Modelle

Genau im «Einfach» liegt der grösste Vorteil. Während sich moderne 3D-Formate wie GLTF oder UDSZ zwar für Web- und AR-Zwecke geradezu aufdrängen, benötigt deren Integration meist einen etwas tieferen Griff in die Programmierkiste.

Vor- und Nachteile gegenüber der eigenen, individuelle Integration haben wir nebenstehend dargestellt.

Vorteile 3D-Webservices

  • Einfacher Weg, 3D-Inhalte in den eigenen Webauftritt zu integrieren
  • Gutes Handling von 3D-Daten – WYSIWYG bei der Aufbereitung
  • Einfache Anreicherung mit Interaktionsmöglichkeiten
  • Einfacher Zugang zu AR- und VR-Funktionalitäten
  • Funktioniert üblicherweise auf allen Plattformen

Nachteile 3D-Webservices

  • Kostenlose Nutzung meist stark eingeschränkt
  • Relativ hohe Kosten bei grossen Mengen an Modellen
  • Datenhoheit liegt beim Anbieter
  • Performance und Bedien-Komfort vom Anbieter abhängig

Zum Beispiel...

Ein Beispiel, wie eine entsprechende Integration aussehen kann: Unser Modell der OfficeLoft über den Anbieter sketchfab.

Sie haben eine VR-Brille? Dann navigieren Sie im Browser auf diese Seite, um sich das Modell in Ihrem Raum zu erkunden.

AWE Schaffhausen – Anbieter für 3D-Content

AWE Schaffhausen schafft seit mehr als zehn Jahren 3D-Inhalte in Form von Produktvisualisierungen, Animationen, Modellen und interaktiven 3D-Tools für Web, AR und VR.

Als Kommunikationsagentur erarbeiten wir Ihnen die Vorteile unterschiedlicher 3D-Tools mit denen sich Inhalte rund um Produkte und Dienstleistungen sehr zielgruppennah und überzeugend transportieren lassen.

Sie haben Fragen – oder wollen mehr zum Thema 3D und Web wissen? Wir stehen Ihnen gerne zur Verfügung.

Virtuell
Wie entstehen 3D-Visualisierungen und -Animationen?
Mehr 3D-Feenstaub