Die Webkomponente <model-viewer>

Das Hinzufügen von 3D-Modellen zu einer Website kann schwierig sein. <model-viewer> ist so einfach wie das Schreiben von HTML-Code.

Joe Medley
Joe Medley

Das Hinzufügen von 3D-Modellen zu einer Website ist schwierig. 3D-Modelle werden idealerweise in einem Viewer angezeigt, der in allen Browsern wie Smartphones, Computern und sogar neuen Head-Mounted Displays responsiv funktioniert. Der Viewer sollte eine progressive Verbesserung für Leistung und Renderingqualität unterstützen. Sie sollte Anwendungsfälle auf allen Geräten unterstützen – von älteren Smartphones mit geringerer Leistung bis hin zu neueren Geräten, die Augmented Reality unterstützen. Es sollte immer auf dem neuesten Stand halten werden, was die neuesten Technologien angeht. Sie sollte leistungsstark und zugänglich sein. Allerdings erfordert die Erstellung eines solchen Viewers spezielle 3D-Programmierkenntnisse und kann für Webentwickler eine Herausforderung darstellen, die ihre eigenen Modelle hosten möchten, anstatt einen Drittanbieter-Hostingdienst zu verwenden.

Mit der Webkomponente <model-viewer> können Sie einer Webseite jedoch deklarativ ein 3D-Modell hinzufügen, während das Modell auf Ihrer eigenen Website gehostet wird. Das Ziel der Komponente ist es, Ihrer Website 3D-Modelle hinzuzufügen, ohne die zugrunde liegende Technologie und Plattform zu verstehen. Die Webkomponente unterstützt responsives Design und Anwendungsfälle wie Augmented Reality auf einigen Geräten. Sie umfasst Funktionen für Barrierefreiheit, Renderingqualität und Interaktivität.

Was ist eine Webkomponente?

Eine Webkomponente ist ein benutzerdefiniertes HTML-Element, das aus standardmäßigen Webplattformfunktionen erstellt wurde. Eine Webkomponente verhält sich für alle Intents und Zwecke wie ein Standardelement. Sie hat ein eindeutiges Tag, kann Eigenschaften und Methoden haben sowie Ereignisse auslösen und darauf reagieren. Kurz gesagt: Sie müssen nichts Besonderes wissen, um eine Webkomponente zu verwenden, geschweige denn <model-viewer>.

In diesem Artikel werden spezielle Funktionen für <model-viewer> beschrieben. Wenn Sie mehr über Webkomponenten erfahren möchten, ist webcomponents.org ein guter Ausgangspunkt.

Was kann <model-viewer> tun?

Die folgenden Beispiele veranschaulichen einige Funktionen von <model-viewer>.

Einfache 3D-Modelle

Mit dem folgenden Markup lässt sich ein 3D-Modell einfach einbetten. Durch die Verwendung von glb-Dateien funktioniert diese Komponente in jedem gängigen Browser.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
  id="mv-shark"
   src="shark.glb"
  camera-controls
></model-viewer>

Dieser Code wird so gerendert:

Mehr Bewegung und Interaktivität

Die Attribute auto-rotate und camera-controls bieten Bewegungs- und Nutzersteuerung. Dies sind nicht die einzig möglichen Attribute. Eine vollständige Liste der Attribute finden Sie in der Dokumentation.

<model-viewer src="shark.glb" auto-rotate camera-controls>

Laden mit Posterbildern verzögern

Das Laden aller 3D-Modelle dauert eine Weile. Wenn Sie das Attribut poster hinzufügen, wird ein Bild angezeigt, bis das Modell einsatzbereit ist. Mit dem Editor kann ein Posterbild erstellt werden, das genauso aussieht wie das 3D-Rendering.

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

Responsives Webdesign

Die Komponente unterstützt verschiedene Arten von responsivem Design und skaliert sowohl für Mobilgeräte als auch für Computer. Es kann auch mehrere Instanzen auf einer Seite verwalten und Intersection Observer verwenden, um Akkuleistung und GPU-Zyklen zu sparen, wenn ein Modell nicht sichtbar ist.

Wenn Sie mit dem zuvor beschriebenen Editor ein Posterbild erstellen, kann dieses einzelne Bild an das 3D-Rendering angeglichen werden, auch wenn das Seitenverhältnis von <model-viewer> auf verschiedene Bildschirmgrößen reagiert.

Mehrere Raumanzug-Bilder, die Responsivität darstellen
Bilder von mehreren Raumanzügen, die Responsivität darstellen

Weitere Funktionen

In der <model-viewer>-Dokumentation finden Sie Demos zu erweiterten Funktionen. Dazu gehören die Möglichkeit, eine vom Boden projizierte Skybox hinzuzufügen und animierte Texturen und Hotspots zu erstellen.