Das HTML-Element <model> kommt auf jedes Apple-Betriebssystem

Auf der WWDC 2026 ließ ein Safari-Ingenieur einen 3D-Campinghammer mit einem einzigen Tag, <model>, ohne JavaScript-Bibliothek, auf eine E-Commerce-Produktseite fallen und ließ Besucher ihn mit dem Finger drehen.¹ Das Element, das dies möglich macht, wird auf visionOS schon seit einer Weile ausgeliefert. Die Neuigkeit von 2026 ist, dass dasselbe Markup nun in Safari auf iPhone, iPad und Mac rendert und die JavaScript-API drumherum erwachsen geworden ist. Apple brachte es auf den Punkt: „Wir haben das Model-Element auf visionOS eingeführt … Jetzt kommt das Model-Element auf iOS, iPadOS und macOS! Dasselbe Markup, dasselbe Element funktioniert über die Plattformen von Apple hinweg.”¹

Die folgende Anleitung folgt dem Pfad für 3D zum direkten Einbinden, den die Session vorzeichnet — vom statischen <img>-Fallback über die Orbit-Interaktion, skriptgesteuerte Transformationen und die Wiedergabe gebackener Animationen bis hin zu AR Quick Look. Alles hier stammt direkt aus WWDC-2026-Session 215.

TL;DR

• Das <model>-Element debütierte zuvor auf visionOS; die WWDC 2026 weitet es auf Safari unter iOS, iPadOS und macOS aus und lässt die JavaScript-API drumherum reifen.¹
• Ein Modell wird wie Medien eingebettet: Richten Sie src auf eine USDZ-Datei, fügen Sie wie bei <video> <source>-Tags mit MIME-Typen hinzu und verschachteln Sie ein <img> darin als Fallback für Browser, die das Element noch nicht unterstützen.¹
• Das ready-Promise teilt Ihnen mit, wann ein Modell geladen ist, sodass Sie einen Spinner austauschen können; ein catch-Block zeigt im Fehlerfall Fallback-Inhalte an.¹
• Das Attribut stagemode="orbit" ermöglicht mit einem einzigen Attribut interaktives Drehen; für skriptgesteuerte Kontrolle setzen Sie stagemode="none" und steuern entityTransform mit einer DOMMatrix, die über rotateSelf aufgebaut wird.¹
• Gebackene Animation wird über playbackRate plus play() wiedergegeben, eine negative Rate spielt sie rückwärts ab, und das Verschachteln des Modells in <a rel="ar"> beschert Besuchern unter iOS und iPadOS ein vollständiges AR-Quick-Look-Erlebnis.¹

Was tatsächlich ausgeliefert wurde

Aleksei vom Safari-Team ordnet die plattformübergreifende Ausweitung ab 0:37 ein.

Die ehrliche Einordnung ist hier wichtig. Das <model>-Element ist nicht brandneu. Apple hat es zuerst auf visionOS ausgeliefert, wo es ein integriertes stereoskopisches Rendering mitbrachte, sodass ein Produkt auf der Apple Vision Pro echte Tiefe vermitteln konnte.¹ Die WWDC 2026 tut zwei Dinge auf dieser Grundlage: Sie bringt das Element in Safari unter iOS, iPadOS und macOS, sodass „Ihre 3D-Inhalte jeden Safari-Besucher erreichen, egal ob er unterwegs am iPhone, im Café am iPad oder am Schreibtisch am Mac sitzt”, und sie baut die JavaScript-API aus, die aus einem statischen Viewer einen interaktiven macht.¹

Das Argument gegen den Status quo ist direkt. Das meiste 3D im Web läuft heute über model-viewer, die beliebte JavaScript-Bibliothek. Apples Argument: Das native Element benötigt keine zusätzliche Bibliothek, rendert „direkt durch die Plattform” und ist „ein aufkommender Webstandard, sodass Ihr Code zukunftssicher ist.”¹ Apples Safari-Team sagt, es trage „aktiv zur Model-Spezifikation beim W3C bei” und lädt über die Immersive Web Community Group zu Feedback ein.¹ Für Browser, die das Element noch nicht unterstützen, verweist die Session auf ein Polyfill, das „die API eines neuen Standards per JavaScript nachrüstet” — mit einem zitierenswerten Vorbehalt: „Einige Funktionen des Elements lassen sich nicht per Polyfill nachrüsten, etwa die stereoskopische Darstellung auf räumlichen Plattformen wie der Apple Vision Pro.”¹

Das Inhaltsformat ist USDZ, „Universal Scene Description, in eine einzige Datei gezippt”, die „alles verpackt, was ein 3D-Modell braucht: Geometrie, Materialien, Texturen, Animationen.”¹ Safari unterstützt andere Formate, doch die Session empfiehlt USDZ für das beste Erlebnis.¹ Woher die Assets stammen, ist eine separate Frage. Apple empfiehlt einen Capture-, Convert-, Create-Ansatz: reale Objekte mit einem iPhone scannen, vorhandene Dateien konvertieren oder in Werkzeugen wie Blender von Grund auf neu bauen.¹ Die Session merkt außerdem an, dass es generative Werkzeuge im Ökosystem gibt; die genannten Apps, Tripo3D und Meshy.ai, sind Drittanbieterdienste, keine Apple-Produkte.¹

Ein Modell auf die Seite setzen

Das Element verhält sich wie die Medien-Tags, die jeder Webentwickler bereits kennt. „Genau wie beim <img>-Tag oder <video>-Tag richten Sie das <model>-Tag mit dem Source-Attribut auf eine Datei, und der Browser übernimmt den Rest. Keine Plugins erforderlich.”¹ Sie können auch ein verschachteltes <source>-Tag mit einem MIME-Typ verwenden — dasselbe Muster wie bei <video> (die Session zeigt das Muster, ohne den Wert zu nennen; model/vnd.usdz+zip ist der Standard-Medientyp für USDZ). Der Fallback ist der Teil, der die Einführung heute sicher macht: Platzieren Sie ein <img> innerhalb des <model>, und ältere Safari-Versionen oder Browser ohne Unterstützung rendern stattdessen das Bild.¹

<model src="mallet.usdz">
  <source src="mallet.usdz" type="model/vnd.usdz+zip">
  <img src="mallet.jpg" alt="Campinghammer" width="480" height="480">
</model>

3D-Modelle können „mehrere zehn Megabyte oder mehr” umfassen, sodass das Laden Zeit braucht.¹ Das ready-Promise wird aufgelöst, wenn das Modell tatsächlich geladen und anzeigebereit ist. Zeigen Sie während des Wartens einen Spinner, blenden Sie ihn aus, wenn ready aufgelöst wird, und behandeln Sie Unerwartetes im catch-Block, indem Sie Fallback-Inhalte einblenden:

const model = document.querySelector("model");

try {
  await model.ready;
  spinner.hidden = true;       // model is loaded and ready to display
} catch (error) {
  spinner.hidden = true;
  fallback.hidden = false;     // show fallback content on failure
}

Ein Rendering-Detail bringt Leute aus dem Konzept. Das <model>-Element „wird in seinem eigenen virtuellen Raum gerendert, sodass es den Hintergrund der Seite nicht übernimmt.”¹ Um es an Ihr Seitendesign anzupassen, setzen Sie background-color direkt auf das Modell. Die Session ergänzt eine Einschränkung: „Der Hintergrund wird immer deckend gerendert; selbst wenn Sie eine Farbe mit Transparenz angeben, wird sie umgewandelt.”¹

Besucher es erkunden lassen

Die günstigste Interaktivität kostet ein Attribut. Mit stagemode="orbit" drehen Besucher „das Modell frei von Seite zu Seite, und wenn sie es nach oben oder unten kippen, federt es sanft in seinen ursprünglichen Winkel zurück.”¹ Das Modell skaliert sich außerdem etwas kleiner, sodass beim Drehen keine Teile abgeschnitten werden.¹ Für die meisten Produktseiten ist dieses eine Attribut bereits die ganze Funktion: „Die Orbit-Stagemode verschafft Ihnen interaktives 3D mit einem einzigen Attribut.”¹

Wenn Sie exakte Winkel benötigen, steuern Sie das Modell stattdessen aus JavaScript. Die Eigenschaft entityTransform „lässt Sie exakte Betrachtungswinkel per JavaScript festlegen.”¹ Um sie zu nutzen, deaktivieren Sie zuerst Orbit — entweder entfernen Sie das stagemode-Attribut oder setzen es auf "none".¹ Die Session warnt, dass manuelle Transformationen Teile des Modells abschneiden oder verbergen können, wenn es aus dem sichtbaren Bereich herausgedreht wird, sodass Sie möglicherweise die Position anpassen müssen.¹ Sie bauen die Ausrichtung mit einer DOMMatrix auf, die „die Ausrichtung des Modells im 3D-Raum repräsentiert”, rufen rotateSelf auf, um die Drehung zu definieren, und weisen sie dann zu:

// disable orbit: <model stagemode="none"> in the markup

// capture the original orientation up front, for Reset
const initialTransform = model.entityTransform;

// Side view: rotate 135 degrees around the Y axis
sideButton.addEventListener("click", () => {
  const matrix = new DOMMatrix();
  matrix.rotateSelf(0, 135, 0);
  model.entityTransform = matrix;
});

// Reset to the original orientation
resetButton.addEventListener("click", () => {
  model.entityTransform = initialTransform;
});

Das Zuweisen einer Transformation wechselt die Ansicht sofort. Um den Übergang zu glätten, animiert die Session die Drehung mit requestAnimationFrame, mit einer Animationsdauer von 500 Millisekunden, „einer halben Sekunde, die flott, aber dennoch weich wirkt”, glättet die Drehung über die Frames hinweg und aktualisiert entityTransform in jedem Frame mit einer frischen DOMMatrix.¹ Der ehrliche Kompromiss, in Apples eigenen Worten: Benutzerdefinierte Transformationen „geben Ihnen volle Kontrolle, erfordern aber zusätzliche Arbeit: Bounding-Boxes, Clipping, manuellen Animationscode.”¹ Greifen Sie zu skriptgesteuerten Transformationen, wenn Sie sie brauchen, und verlassen Sie sich auf stagemode="orbit", wenn nicht.

Gebackene Animation abspielen, dann zu AR wechseln

Modelle können auch ihre eigene Bewegung mitbringen. Animationen „werden typischerweise in 3D-Werkzeugen wie Blender oder Maya erstellt und in die USDZ-Datei gebacken”, und das Element „spielt die erste Animationsspur ab.”¹ Zwei Zeilen JavaScript steuern die Wiedergabe: Setzen Sie playbackRate auf dem Modell und rufen Sie dann dessen play()-Methode auf. Ein positiver Wert spielt vorwärts ab, ein negativer Wert kehrt sie um, und die Session verwendet 5 und -5 für eine schnellere Wiedergabe:

function play(rate) {
  model.playbackRate = rate;   // positive plays forward, negative reverses
  model.play();
}

play(5);    // fast forward
play(-5);   // fast reverse

Der letzte Schritt holt das Produkt vom Bildschirm in den Raum. „Verschachteln Sie das Modell in einem <a>-Tag mit dem Attribut rel="ar", richten Sie es auf dieselbe Ressource, und unter iOS und iPadOS erhalten Ihre Kunden ein vollständiges AR-Quick-Look-Erlebnis.”¹

<a rel="ar" href="mallet.usdz">
  <model src="mallet.usdz">
    <img src="mallet.jpg" alt="Campinghammer">
  </model>
</a>

Auf visionOS ließ das Element 3D bereits „wie einen natürlichen Teil des Webs wirken”, mit stereoskopischem Rendering, das Kunden erlaubt, „das Produkt aus der Seite zu ziehen und es so zu betrachten, als läge es direkt in ihren Händen”, und es treibt immersive Website-Umgebungen an, die einen Besucher aus Safari heraus in eine Szene versetzen.¹

Kleiner ausliefern

Lokale Dateien sehen großartig aus; dieselben Dateien über das Internet laden langsam. Die Session führt ein Befehlszeilenwerkzeug, usdcrush, auf dem Modell aus: „Ohne Qualitätsverlust schrumpft die Datei von 7,9 MB auf 1,9 MB”, und die beiden Versionen, die in Safari nebeneinander geöffnet werden, sehen identisch aus.¹ Ein begleitendes Werkzeug, usdrecord, erzeugt direkt aus einer 3D-Datei ein Vorschau- oder Fallback-Bild, wenn Sie noch keines haben, mit Optionen wie dem Ausgabeformat oder dem Rendern aus einer benutzerdefinierten Kamera in der Datei.¹ Beide Werkzeuge „sind bereits auf Ihrem Mac installiert” als Teil einer größeren USD-Suite, und die Session merkt an, dass Sie usdrecord über einen gesamten Katalog hinweg skripten können.¹ Für das Format selbst veröffentlicht die Alliance for OpenUSD die vollständige USDZ-Spezifikation als „klare, herstellerneutrale Referenz” zusammen mit Konvertierungswerkzeugen.¹

Was die Labs zu Größe und Laden ergänzten

Die WWDC-Labs füllten einige Details aus, die die Session offenließ.

Zur Komprimierung: usdcrush kodiert Texturen nun nach AVIF; zuvor wurde JPEG verwendet.² Apple sagte zudem, es stehe in Gesprächen mit der Alliance for Open Media über ein geeignetes Format zur Mesh-Komprimierung.²

Zur Größe: Das Panel nannte keine harten Grenzen, deutete aber an, dass maximale visuelle Qualität bei einem Modell auf der Seite um die 10 MB liegt. Immersive Umgebungen dürfen berechtigterweise größer sein.²

Zum Laden: Das Panel räumte eine Lücke ein — es gibt heute keine CSS-Pseudoklasse für den Ladezustand eines Modells, sodass das zuvor behandelte ready-Promise das Werkzeug für diese Aufgabe ist.² Das Panel zog außerdem eine beachtenswerte zweiphasige Unterscheidung: heruntergeladene Bytes sind nicht dasselbe wie eine verarbeitete und nutzbare Ressource.²

Wichtigste Erkenntnisse

Für Webentwickler: - Fügen Sie <model> schon heute mit einem darin verschachtelten <img>-Fallback hinzu, sodass nicht unterstützende Browser auf ein statisches Bild zurückfallen und unterstützende Safari-Versionen automatisch auf interaktives 3D umschalten.¹ - Koppeln Sie die Anzeige an das ready-Promise und behandeln Sie Fehler im catch, denn ein mehrere Megabyte großes USDZ braucht echte Zeit zum Laden.¹

Für 3D-Künstler: - Backen Sie Ihre erste Animationsspur in Blender oder Maya in das USDZ; das Element spielt sie ab und stellt playbackRate plus play() für die Vorwärts- und Rückwärtssteuerung bereit.¹ - Führen Sie vor dem Ausliefern usdcrush aus, um die Dateigröße ohne sichtbaren Qualitätsverlust zu reduzieren, und usdrecord, um den <img>-Fallback aus dem Modell selbst zu erzeugen.¹

Für Produkt- und Commerce-Teams: - Nutzen Sie stagemode="orbit" für interaktives Drehen mit nur einem Attribut, und reservieren Sie skriptgesteuertes entityTransform für Fälle, die exakte Winkel oder eine benutzerdefinierte UI erfordern.¹ - Verschachteln Sie das Modell in <a rel="ar">, damit Käufer unter iOS und iPadOS das Produkt über AR Quick Look in ihrem eigenen Raum platzieren können.¹

FAQ

Ist das HTML-Element <model> im Jahr 2026 brandneu?

Nein. Apple hat das <model>-Element zuerst auf visionOS ausgeliefert. Die WWDC 2026 weitet es mit demselben Markup auf Safari unter iOS, iPadOS und macOS aus und lässt die JavaScript-API drumherum reifen (das ready-Promise, entityTransform, die Wiedergabe gebackener Animationen und <a rel="ar">).¹

Wie füge ich einen Fallback für Browser ohne <model>-Unterstützung hinzu?

Verschachteln Sie ein <img>-Tag innerhalb des <model>-Tags. Ältere Safari-Versionen und Browser, die das Element noch nicht unterstützen, rendern stattdessen das Bild, sodass Besucher das Produkt dennoch sehen. Es gibt auch ein Polyfill, wobei sich einige Funktionen wie die stereoskopische Darstellung auf visionOS nicht per Polyfill nachrüsten lassen.¹

Welches Dateiformat verwendet das <model>-Element?

USDZ, Universal Scene Description, in eine einzige Datei gezippt, die Geometrie, Materialien, Texturen und Animationen verpackt. Safari unterstützt andere Formate, doch Apple empfiehlt USDZ für das beste Erlebnis, und die Alliance for OpenUSD veröffentlicht die vollständige Spezifikation.¹

Wie mache ich ein Modell interaktiv?

Setzen Sie stagemode="orbit" für freies Drehen von Seite zu Seite mit einem einzigen Attribut. Für exakte Winkel setzen Sie stagemode="none", bauen eine DOMMatrix mit rotateSelf auf und weisen sie der Eigenschaft entityTransform des Modells zu — animiert über die Frames hinweg mit requestAnimationFrame, falls Sie einen weichen Übergang möchten.¹

Wie überführe ich ein Web-Modell in Augmented Reality?

Verschachteln Sie das <model> in einem <a>-Tag mit dem Attribut rel="ar", das auf dieselbe USDZ-Ressource zeigt. Unter iOS und iPadOS verschafft das Besuchern ein vollständiges AR-Quick-Look-Erlebnis, sodass sie das Produkt in ihrer Umgebung platzieren können.¹

Das <model>-Element baut auf demselben USD-Fundament auf, das Apple plattformübergreifend vorantreibt: siehe Apples neues Swift-natives USD-Framework, USDKit, und den räumlichen Kontext in Was ist neu in visionOS 27. Das Argument für ein Tag statt einer Bibliothek fügt sich in die umfassendere Argumentation in Das No-Build-Manifest und HTML ist das Format, das Agenten wollen. Der zentrale Hub der gesamten Reihe ist die Apple Ecosystem Series.

Quellenangaben