3D Modelle in Storyline 360

In der Welt der Webentwicklung gibt es ständig neue Technologien und Tools, die das Erstellen von ansprechenden und interaktiven Inhalten erleichtern. Eines dieser aufregenden Werkzeuge ist der Model-Viewer von Google. In diesem Blogbeitrag werden wir uns genauer mit diesem Webkomponenten-Tool befassen und herausfinden, wie es das Rendering von 3D-Modellen im Web und in der Augmented Reality (AR) revolutioniert.

Was ist der Model-Viewer?

Der Model-Viewer ist eine Webkomponente, die das Rendern von interaktiven 3D-Modellen auf einfache Weise ermöglicht – optional auch in AR. Das Ziel des Model-Viewers ist es, großartige Voreinstellungen für die Rendering-Qualität und -Leistung zu bieten. Egal auf welchem Browser oder Gerät du arbeitest, der Model-Viewer sorgt dafür, dass deine 3D-Modelle beeindruckend aussehen und reibungslos funktionieren.

Wie verwende ich den Model-Viewer?

1. Installation: Du kannst den Model-Viewer in dein Projekt einbinden, indem du das Paket @google/model-viewer über npm installierst:

   npm i @google/model-viewer
   

2. Verwendung: Nach der Installation kannst du den Model-Viewer wie jedes andere HTML-Element verwenden. Hier ein einfaches Beispiel:

   <model-viewer
     alt="Neil Armstrong's Spacesuit"
     src="shared-assets/models/NeilArmstrong.glb"
     ar
     environment-image="shared-assets/environments/moon_1k.hdr"
     poster="shared-assets/models/NeilArmstrong.webp"
     shadow-intensity="1"
     camera-controls
     touch-action="pan-y"
   ></model-viewer>

   Dieses Beispiel zeigt das 3D-Modell von Neil Armstrongs Raumanzug auf dem Mond. Der Model-Viewer ermöglicht es, das Modell im Web anzuzeigen und nahtlos in die AR zu wechseln.

Beispiel für Storyline 360:

Browserunterstützung

Der Model-Viewer wird von den letzten beiden Hauptversionen aller aktuellen Desktop- und Mobilbrowser unterstützt. Zusätzlich funktioniert er auch auf den letzten beiden Versionen von Safari (auf MacOS und iOS). Wenn du AR-Modi mit WebXR nutzen möchtest, benötigst du bestimmte Browserfunktionen. Diese sind jedoch nur optional und nicht zwingend erforderlich.

Insgesamt bietet der Model-Viewer eine aufregende Möglichkeit, 3D-Modelle im Web zu präsentieren und die Grenzen der Interaktivität zu erweitern. Probiere es aus und tauche ein in die faszinierende Welt der virtuellen Realität und Augmented Reality! 

Quellen:

1. Offizielle Model-Viewer-Website
2. npm-Paket für @google/model-viewer
3. Google Developers: Augmented Reality mit Model-Viewer
4. Articulate Community