Das Hinzufügen von 3D-Modellen zu einer Website kann schwierig sein. <model-viewer> ist so einfach wie das Schreiben von HTML.
Das Hinzufügen von 3D-Modellen zu einer Website ist kompliziert. 3D-Modelle werden idealerweise in einem Viewer angezeigt, der auf allen Browsern, einschließlich Smartphones, Computern oder sogar neuen Head-Mounted Displays, responsiv funktioniert. Der Viewer sollte die progressive Verbesserung für Leistung und Rendering-Qualität unterstützen. Sie sollte Anwendungsfälle auf allen Geräten unterstützen, von älteren, weniger leistungsstarken Smartphones bis hin zu neueren Geräten, die Augmented Reality unterstützen. Sie sollte mit aktuellen Technologien auf dem neuesten Stand bleiben. Sie sollte leistungsstark und barrierefrei sein. Die Erstellung eines solchen Viewers erfordert jedoch spezielle 3D-Programmierkenntnisse und kann für Webentwickler, die ihre eigenen Modelle hosten möchten, anstatt einen Hostingdienst eines Drittanbieters zu verwenden, eine Herausforderung sein.
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.
Mit der Komponente können Sie 3D-Modelle auf Ihrer Website einfügen, ohne die zugrunde liegende Technologie und die Plattformen verstehen zu müssen.
Die Webkomponente unterstützt responsives Design und Anwendungsfälle wie Augmented Reality auf einigen Geräten.
Sie umfasst Funktionen für Bedienungshilfen, Renderingqualität und Interaktivität.
Was ist eine Webkomponente?
Eine Webkomponente ist ein benutzerdefiniertes HTML-Element, das aus Standardfunktionen der Webplattform 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 eine Webkomponente zu verwenden, geschweige denn <model-viewer>.
In diesem Artikel werden Funktionen beschrieben, die nur in <model-viewer> verfügbar sind.
Wenn Sie mehr über Webkomponenten erfahren möchten, ist webcomponents.org ein guter Ausgangspunkt.
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. Durch die Verwendung von GLB-Dateien 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>
Dieser Code wird so gerendert:
Bewegung und Interaktivität hinzufügen
Die Attribute auto-rotate und camera-controls ermöglichen die Steuerung von Bewegung und Nutzer. 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 von 3D-Modellen dauert immer etwas. Wenn Sie ein poster-Attribut hinzufügen, wird ein Bild angezeigt, bis das Modell einsatzbereit ist.
Mit dem Editor kann ein Posterbild generiert werden, das mit dem 3D-Rendering 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 lässt sich sowohl für Mobilgeräte als auch für Computer skalieren. Außerdem können mehrere Instanzen auf einer Seite verwaltet werden. Mit Intersection Observer werden Akkuleistung und GPU-Zyklen gespart, wenn ein Modell nicht sichtbar ist.
Wenn Sie das Posterbild mit dem zuvor beschriebenen Editor erstellen, kann dieses einzelne Bild mit dem 3D-Rendering übereinstimmen, auch wenn sich das Seitenverhältnis von <model-viewer> an verschiedene Bildschirmgrößen anpasst.
Weitere Funktionen
In der <model-viewer>-Dokumentation finden Sie Demos zu weiteren erweiterten Funktionen.
Dazu gehören die Möglichkeit, eine auf den Boden projizierte Skybox hinzuzufügen, sowie die Erstellung von animierten Texturen und Hotspots.