Jetzt neu: Version 1.1

3D-Modelle für Ihre Webseite so einfach wie das Schreiben von HTML-Code

Joe Medley

Rob Kochman

3D-Modelle sind relevanter denn je. Die Einzelhändler bieten den Kunden nach Hause ein ganz besonderes Einkaufserlebnis. Museen stellen 3D-Modelle ihrer Artefakte für jeden im Web verfügbar. Leider kann es schwierig sein, einer Website ein 3D-Modell so hinzuzufügen, dass es Nutzern ohne tiefgreifende Kenntnisse der 3D-Technologien gelingt, ohne tiefgehende Kenntnisse der 3D-Technologien oder auf das Hosten von 3D-Inhalten auf einer Drittanbieter-Website zurückzugreifen. Mit der Anfang 2019 eingeführten <model-viewer>-Webkomponente sollen 3D-Modelle so einfach wie das Schreiben einiger HTML-Zeilen im Web bereitgestellt werden. Seitdem arbeitet das Team daran, auf Feedback und Wünsche aus der Community einzugehen. Höhepunkt dieser Arbeit war die <model-viewer>-Version 1.0, die Anfang dieses Jahres veröffentlicht wurde. Wir geben jetzt die Veröffentlichung von <model-viewer> 1.1 an. Sie können die Versionshinweise in GitHub lesen.

Was gibt es seit letztem Jahr?

Version 1.1 bietet integrierte Unterstützung für Augmented Reality (AR) im Web, Verbesserungen bei Geschwindigkeit und Grafikqualität sowie weitere häufig angefragte Funktionen.

Augmented Reality

Ein 3D-Modell auf einem leeren Canvas anzusehen ist toll, aber noch besser, wenn Sie es sich in Ihrem Raum ansehen können. Für eine 3D- und AR-Ansicht, die sich vollständig im Browser befindet, unterstützt Chrome Android Augmented Reality mithilfe von WebXR .

Wenn die Methode fertig ist, können Sie sie verwenden, indem Sie dem <model-viewer>-Tag ein ar-Attribut hinzufügen. Mit anderen Attributen können Sie die WebXR-AR-Umgebung anpassen, wie im WebXR-Beispiel auf modelviewer.dev gezeigt. Das folgende Codebeispiel zeigt, wie dies aussehen könnte.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

Es sieht in etwa aus wie das eingebettete Video unter dieser Überschrift.

Steuerelemente der Kamera

<model-viewer> gibt jetzt die volle Kontrolle über die virtuelle Kamera der Ansicht (die Perspektive des Betrachters). Dazu gehören das Kameraziel, die Umlaufbahn (Position relativ zum Modell) und das Sichtfeld. Sie können auch die automatische Rotation aktivieren und Limits für die Nutzerinteraktion festlegen (z.B. maximale und minimale Sichtfeld).

Annotationen

Sie können Ihre Modelle auch mit HTML und CSS annotieren. Diese Funktion wird häufig verwendet, um Labels so an Teile des Modells anzuhängen, dass es sich mit dem Modell fortbewegt, wenn es bearbeitet wird. Die Annotationen sind anpassbar, einschließlich ihrer Darstellung und des Ausmaßes, in dem sie vom Modell verborgen sind. Anmerkungen funktionieren auch in AR.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

Weitere Informationen finden Sie auf der Dokumentationsseite zu Anmerkungen.

Bearbeiter

In Version 1.1 wird ein <model-viewer>-Bearbeitungstool eingeführt und gehostet, mit dem du dein Modell schnell in der Vorschau ansehen, verschiedene <model-viewer>-Konfigurationen (z.B. Belichtung und Schattenweichheit) ausprobieren, ein Posterbild erstellen und interaktiv Koordinaten für Anmerkungen abrufen kannst.

Rendering- und Leistungsverbesserungen

Die Rendering-Qualität wurde erheblich verbessert, insbesondere in HDR-Umgebungen (High Dynamic Range). <model-viewer> verwendet jetzt auch einen direkten Renderingpfad, wenn sich nur ein <model-viewer>-Element im Darstellungsbereich befindet. Dadurch wird die Leistung erhöht (insbesondere in Firefox). Und schließlich konnte durch die dynamische Skalierung der Rendering-Auflösung die Framerate deutlich verbessert werden. Das folgende Beispiel zeigt einige dieser jüngsten Verbesserungen.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

Stabilität

Da <model-viewer> die erste Hauptversion erreicht, hat die API-Stabilität Priorität. Daher werden funktionsgefährdende Änderungen bis zur Veröffentlichung von Version 2.0 vermieden.

Nächste Schritte

<model-viewer> Version 1.0 enthält die am häufigsten angeforderten Funktionen, aber das Team ist noch nicht fertig. Es werden weitere Funktionen sowie Verbesserungen bei Leistung, Stabilität, Dokumentation und Tools hinzugefügt. Wenn Sie Vorschläge haben, melden Sie ein Problem in GitHub. PRs sind immer willkommen. Wenn Sie in Verbindung bleiben möchten, folgen Sie <model-viewer> auf Twitter und besuchen Sie den Community-Chat auf Spectrum.