Diese Seite wurde von der Cloud Translation API übersetzt.

3D-Modelle mit <model-viewer> ins Web einfügen

Heutzutage haben viele Menschen Geräte in der Tasche, die Augmented Reality (AR) und Virtual Reality (VR) unterstützen. Immer mehr Inhalte, die wir auf diesen Geräten miteinander teilen, sind in 3D. In diesem Codelab erfahren Sie, wie Sie mit einer Webkomponente namens <model-viewer> 3D-Inhalte so einfach wie ein Bild mit HTML in Ihre Website oder Progressive Web-App (PWA) einfügen können.

Überblick

Eine Website mit einem interaktiven 3D-Modell, auf dem AR-Hologramme angezeigt werden können

Lerninhalte

So installieren Sie die <model-viewer>-Webkomponente auf Ihrer Website
<model-viewer> verwenden, um ein 3D-Modell in einem Standard-Weblayout zu präsentieren
<model-viewer> anpassen, um der Präsentation mehr Flair zu verleihen

Voraussetzungen

Einen Webbrowser. Wir empfehlen Chrome, aber jeder moderne Browser (Firefox, Safari, Edge) funktioniert.
Node.js und ein Texteditor oder Zugriff auf Glitch.
Grundkenntnisse in HTML, CSS, JavaScript und den Chrome-Entwicklertools

In diesem Codelab geht es um <model-viewer> und 3D-Modelle. Auf irrelevante Konzepte wird nicht genauer eingegangen und entsprechende Codeblöcke können Sie einfach kopieren und einfügen.

Option 1: Glitch

Sie können ein Online-Codebearbeitungstool wie Glitch verwenden, um Ihr Projekt zu hosten und Änderungen zu sehen.

Klicken Sie auf die folgende Schaltfläche, um mit Glitch zu beginnen:

Vorab geladene Glitch-Umgebung öffnen

Ab jetzt können Sie den Codeeditor auf Glitch verwenden, um Ihre Dateien zu ändern. Wenn Sie fertig sind, können Sie Ihre Anwendung mit der Schaltfläche „Show Live“ (Live anzeigen) bereitstellen. Probieren Sie es jetzt aus. Die folgende Seite sollte aufgerufen werden:

Option 2: Lokaler Server

Mit einem lokalen Server können Sie Ihren bevorzugten Code-Editor verwenden.

Server installieren

Wir benötigen eine Möglichkeit, lokale Webseiten bereitzustellen. Eine einfache Möglichkeit ist die Verwendung von Node.js und serve, einem einfachen Server für statische Inhalte.

Eine Anleitung zur Installation auf Ihrem Betriebssystem finden Sie auf der Node.js-Website. Führen Sie nach der Installation von Node.js diesen Befehl aus, um „serve“ zu installieren:

npm install -g serve

Code herunterladen

Eine Startvorlage sowie alle Beispiel-Assets stehen zum Download zur Verfügung. Klicken Sie auf den folgenden Link und entpacken Sie den Inhalt in das Verzeichnis, in dem sich Ihr Projekt befinden soll:

Quellcode herunterladen

Alternativ können Sie das Repository mit Git klonen:

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

Server ausführen

Führen Sie im oben extrahierten Vorlagenverzeichnis (oder im geklonten Verzeichnis, wenn Sie Git verwendet haben) den Befehl serve aus, um einen Webserver zu starten:

Rufen Sie diese Adresse auf (im Screenshot oben ist es http://localhost:5000, aber sie kann auf Ihrem Computer anders sein), um einen sehr einfachen Ausgangspunkt zu sehen:

Wir beginnen mit der Bearbeitung der Datei index.html, entweder über den Glitch-Web-Editor oder, wenn Sie den lokalen Server verwenden, mit Ihrem bevorzugten Code-Editor.

<model-viewer>-Bibliothek hinzufügen

Damit wir <model-viewer> verwenden können, müssen wir eine Reihe von JavaScript-Dateien einbinden.

Im folgenden Abschnitt wird die <model-viewer>-Bibliothek auf Ihrer Seite hinzugefügt. Fügen Sie den folgenden Code am Ende von <body> ein.

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

Wir haben nur Bibliotheken hinzugefügt, ohne Inhalte zu ändern. Wenn Sie die Seite aktualisieren, sehen Sie dieselben Inhalte. Wenn Sie die Entwicklertools-Konsole öffnen, sehen Sie möglicherweise einige Warnungen zu fehlenden WebXR-APIs. Diese sind jedoch zu erwarten, bis die API vollständig veröffentlicht wird.

Kompatibilität maximieren

<model-viewer> unterstützt viele moderne Browser. Wenn Sie die Anzahl der Browser, die Ihre Seite unterstützen kann, erhöhen möchten, können Sie zusätzliche Polyfills einfügen.

Die vollständige empfohlene Gruppe finden Sie unten. So können Sie eine optimale Nutzererfahrung in allen modernen Browsern bieten. Weitere Informationen finden Sie in der Dokumentation zu <model-viewer>-Polyfills.

Fügen Sie den folgenden Code in <head> ein.

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

<model-viewer> hinzufügen

Fügen wir jetzt das eigentliche <model-viewer>-Tag auf der Seite ein, damit wir 3D-Inhalte sehen können. Ersetzen Sie das vorhandene <p>-Element durch den folgenden Code:

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

Es gibt nur zwei Attribute, die hier erwähnt werden müssen:

Das Attribut src gibt an, wo das 3D-Modell geladen werden soll. In diesem Beispiel haben wir das Astronaut-Modell von Poly verwendet, das unter der CC-BY-Lizenz verfügbar ist.
Das Attribut alt enthält eine alternative Textbeschreibung des Modells für die Barrierefreiheit.

Sie werden feststellen, dass beide Attribute starke Parallelen zu Attributen des img-Tags aufweisen.

Beim Neuladen wird der Astronaut angezeigt:

Sehr gut! Sie haben ein 3D-Modell im Web.

In den folgenden Schritten werden wir mit mehr Interaktivität und Bewegung experimentieren, das Erscheinungsbild des Elements ändern und uns mit AR vertraut machen.

Fügen wir dem Modell etwas Interaktivität hinzu. Das Modell wird standardmäßig gedreht, um Nutzern einen Hinweis darauf zu geben, dass es interaktiv ist (und um es zu präsentieren). Anschließend werden Steuerelemente aktiviert, damit Nutzer das Modell selbst mit der Maus oder per Touch bewegen können.

Fügen Sie dazu einfach die Attribute auto-rotate und camera-controls dem <model-viewer>-Element hinzu.

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

Wenn Sie die Seite aktualisieren, dreht sich das Astronauten-Bild langsam. Wenn Sie das Modell ziehen (entweder durch Klicken und Bewegen der Maus oder auf einem Touchscreen durch Ziehen mit dem Finger), wird es gedreht.

Zusammen vermitteln diese Funktionen dem Nutzer, dass es sich um mehr als nur ein statisches Bild handelt, und geben ihm ein Gefühl der Interaktivität, sodass er sich einbezogen fühlt (und die Rückseite Ihres Modells sehen kann).

Nachdem wir nun etwas Bewegung haben, können wir das Aussehen anpassen, um das Modell noch ansprechender zu gestalten.

Modell aktualisieren

Einige dieser Änderungen, insbesondere die Beleuchtungsänderungen, sind bei bestimmten Modellen besser zu sehen. Aktualisieren wir zuerst das Attribut src, damit es auf ein neues Modell verweist: third_party/DamagedHelmet/DamagedHelmet.gltf (veröffentlicht unter einer Creative Commons-Lizenz „Namensnennung – Nicht kommerziell“ auf Sketchfab). Die Quelle des gesamten Elements sollte jetzt so aussehen:

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

In diesem Modell sehen Sie einige der Änderungen, die wir vornehmen werden.

Hintergrundfarbe ändern

Ändern wir zuerst die Hintergrundfarbe, damit sich das Modell von der Seite abhebt. Fügen Sie Ihrem <model-viewer>-Tag das folgende Attribut hinzu:

background-color="#70BCD1"

Umgebungskarte festlegen

Umgebungskarten werden verwendet, um eine umschließende Szene bereitzustellen, die vom Modell reflektiert wird, und um die Beleuchtungskonfiguration festzulegen. Die Standardbeleuchtung ist ausgezeichnet (und mit der Beleuchtung des ARCore Scene Viewers kompatibel). Manchmal benötigen Sie jedoch eine benutzerdefinierte Umgebung oder eine Beleuchtung, die speziell auf die Ergebnisse abgestimmt ist, die Sie erzielen möchten. Wir geben das Attribut „environment-image“ an (studio_small_07_1k.hdr stammt von hdrihaven.com).

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

Schatten hinzufügen

Wenn das Objekt einen Schatten wirft, erhält die Szene zusätzliche Tiefe. Wenn das folgende Attribut unserem <model-viewer>-Element hinzugefügt wird, wird ein Schatten geworfen:

shadow-intensity="1"

Beleuchtungsstärke ändern

Das Modell ist etwas dunkel. Wir erhöhen die Helligkeit etwas, damit wir mehr Details sehen können. Sowohl die Standard-Bühnenbeleuchtung als auch die Beleuchtung der von uns hinzugefügten Environmap-Karte können unabhängig voneinander angepasst werden. Fügen Sie Folgendes hinzu:

stage-light-intensity="3" environment-intensity="2"

Jede dieser Änderungen war ziemlich klein, aber das Modell sieht jetzt viel besser aus.

Als Nächstes sehen wir uns einige alternative Anzeigemodi an.

Immer mehr Geräte bieten eine Art Augmented Reality (AR). Einige dieser Modi sind schwer auszulösen oder erfordern speziellen Code, aber <model-viewer> kann diese Komplexität für Sie bewältigen.

Scene Viewer von ARCore

Auf unterstützten Geräten kann <model-viewer> ARCore Scene Viewer auslösen. Fügen Sie Ihrem <model-viewer>-Element das Attribut ar hinzu. Das ist alles, was Sie tun müssen.

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

Wenn Sie sich das jetzt auf einem unterstützten Gerät mit einer aktuellen ARCore-Version ansehen, wird ein zusätzliches Symbol angezeigt (siehe Bild unten). Wenn Sie darauf klicken, wird Ihr Modell im Szenen-Explorer geöffnet.

Andere Geräte – iOS Quick Look, Magic Leap, WebXR

Bei vielen anderen Geräten ist etwas mehr Aufwand erforderlich.

Unter iOS kann mit dem Attribut ios-src eine zusätzliche USDZ-Version des 3D-Modells angegeben werden, die unter iOS erforderlich ist. Wenn dieses Attribut angegeben wird, wird auf unterstützten iOS-Geräten das Standard-AR Quick Look-Symbol für das Modell angezeigt. Weitere Informationen zu USDZ finden Sie in der Entwicklerdokumentation von Apple.

Auf Magic Leap-Geräten wird durch das Attribut magic-leap die AR-Unterstützung aktiviert. Sie müssen auch die prismatic.js-Bibliothek einfügen (sie ist in den optionalen Polyfills enthalten, aber auskommentiert). Das 3D-Modell muss eine GLB-Datei (nicht GLTF) sein.

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

Der Anfangswinkel und die Anfangsposition der Kamera können gesteuert werden. So können wir Nutzern eine bessere Standardansicht des Helms präsentieren. Fügen Sie Ihrem <model-viewer>-Tag das folgende Snippet hinzu:

camera-orbit="-20deg 75deg 2m"

Natürlich können diese Modelle auch mit Ihren anderen Inhalten verwendet werden, einschließlich auf responsiven Seiten. Das Erstellen einer responsiven Webseite geht über den Rahmen dieses Codelabs hinaus. Weitere Informationen finden Sie unter Grundlagen zu responsivem Webdesign.

Wir haben eine Beispielseite in unser Repository aufgenommen. responsive.html im Breitbildformat (z. B. auf einem Computer) ansehen:

Dieselbe Seite in einem schmalen Darstellungsbereich (z. B. auf einem Mobilgerät):

Sie haben 3D-Inhalte in eine Webseite eingebettet. Gut gemacht!

Nächste Schritte

Es gibt viele weitere Konfigurationsoptionen. Weitere Informationen finden Sie in unserer Onlinedokumentation oder im Code.

Nachdem Sie Ihre Modelle identifiziert haben, können Sie über die folgenden Schritte nachdenken:

Einige Modelle können recht groß sein. In diesen Fällen bietet <model-viewer> mehrere Methoden, um trotzdem ein hervorragendes Nutzererlebnis zu bieten. Weitere Informationen finden Sie auf der Dokumentationsseite Lazy Loading.
Animierte Modelle können wirklich Spaß machen. Weitere Informationen zum Aktivieren und Wechseln von Animationen, die in Ihren Modellen definiert sind, finden Sie auf der Seite Animationen.
Und das ist immer noch das Web – Modelle können in Ihre Webseiten eingebettet werden, um Ihre Inhalte zu ergänzen.

Unser Entwicklungsprozess ist auf GitHub öffentlich. Wir würden uns freuen, deine Meinung zu hören!