Die Webkomponente <model-viewer>

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

Joe Medley
Joe Medley

Das Hinzufügen von 3D-Modellen zu einer Website ist schwierig. 3D‑Modelle werden idealerweise in einem Viewer angezeigt, der responsiv in allen Browsern funktioniert, einschließlich Smartphones, Computern oder sogar neuen tragbaren Displays. Der Viewer sollte die progressive Verbesserung zur Leistung und Rendering-Qualität unterstützen. Sie sollte Anwendungsfälle auf allen Geräten unterstützen, von älteren, leistungsschwächeren Smartphones bis hin zu neueren Geräten, die Augmented Reality unterstützen. Sie sollte immer auf dem neuesten Stand der aktuellen Technologien sein. Sie sollte leistungsstark und barrierefrei sein. Das Erstellen eines solchen Betrachters erfordert jedoch spezielle 3D-Programmierkenntnisse und kann für Webentwickler, die ihre eigenen Modelle hosten möchten, anstatt einen Drittanbieter-Hostingdienst zu verwenden, schwierig sein.

Mit der Webkomponente <model-viewer> können Sie jedoch deklarativ ein 3D‑Modell auf einer Webseite einfügen und das Modell auf Ihrer eigenen Website hosten. Mit der Komponente können Sie Ihrer Website 3D‑Modelle hinzufügen, ohne sich mit der zugrunde liegenden Technologie und den Plattformen auskennen zu müssen. Die Webkomponente unterstützt responsives Design und Anwendungsfälle wie Augmented Reality auf einigen Geräten. Er umfasst Funktionen für Barrierefreiheit, Renderingqualität und Interaktivität.

Was ist eine Webkomponente?

Eine Webkomponente ist ein benutzerdefiniertes HTML-Element, das aus Standardfunktionen der Webanwendung erstellt wird. Eine Webkomponente verhält sich in jeder Hinsicht wie ein Standardelement. Es hat ein eindeutiges Tag, kann Eigenschaften und Methoden haben und Ereignisse auslösen und darauf reagieren. Kurz gesagt: Sie müssen nichts Besonderes wissen, um Webkomponenten zu verwenden, geschweige denn <model-viewer>.

In diesem Artikel werden Funktionen beschrieben, die nur für <model-viewer> gelten. Weitere Informationen zu Webkomponenten finden Sie unter webcomponents.org.

Was kann <model-viewer> tun?

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

Einfache 3D-Modelle

Das Einbetten eines 3D-Modells ist so einfach wie das folgende Markup. Da GLB-Dateien verwendet werden, funktioniert diese Komponente in allen gängigen Browsern.

<!-- 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>

Das Ergebnis sieht so aus:

Bewegung und Interaktivität hinzufügen

Die Attribute auto-rotate und camera-controls bieten eine Bewegungs- und Nutzersteuerung. Das sind nicht die einzigen 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 einige Zeit. Wenn Sie ein poster-Attribut hinzufügen, wird ein Bild angezeigt, bis das Modell einsatzbereit ist. Mit dem Editor können Sie ein Posterbild erstellen, das mit dem 3D-Renderbild identisch ist.

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

Responsives Webdesign

Die Komponente unterstützt einige Arten von responsivem Design und kann sowohl für Mobilgeräte als auch für Computer skaliert werden. Außerdem kann es mehrere Instanzen auf einer Seite verwalten und nutzt IntersectionObserver, um Akku und GPU-Zyklen zu sparen, wenn ein Modell nicht sichtbar ist.

Wenn du mit dem zuvor beschriebenen Editor ein Posterbild erstellst, kann dieses einzelne Bild dem 3D-Render entsprechen, auch wenn das Seitenverhältnis von <model-viewer> auf unterschiedliche Bildschirmgrößen reagiert.

Mehrere Bilder von Raumanzügen, die für Reaktionsfähigkeit stehen
Mehrere Bilder von Raumanzügen, die die Responsivität darstellen.

Weitere Funktionen

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