HTML <model> 元素登陸每一個 Apple 作業系統

在 WWDC 2026 上，一位 Safari 工程師只用一個標籤 <model>、不靠任何 JavaScript 函式庫，就把一支 3D 露營槌放進電商商品頁，並讓訪客用手指旋轉它。¹ 讓這一切成為可能的元素，其實在 visionOS 上已推出一段時間了。2026 年的新消息是：同樣的標記如今也能在 iPhone、iPad 與 Mac 的 Safari 中呈現，而圍繞它的 JavaScript API 也已成熟。Apple 講得很直白：「我們在 visionOS 上率先推出了 Model 元素……現在 Model 元素來到了 iOS、iPadOS 與 macOS！同樣的標記、同樣的元素，在 Apple 各平台上一致運作。」¹

下方的逐步說明，依循該議程鋪陳的「直接放入 3D」路徑：從靜態 <img> 後備內容，到環繞互動、腳本化變換、烘焙動畫播放，再到 AR Quick Look。這裡的一切都直接出自 WWDC 2026 第 215 場議程。

TL;DR

• <model> 元素先前已在 visionOS 上亮相；WWDC 2026 將它擴展到 iOS、iPadOS 與 macOS 的 Safari，並讓圍繞它的 JavaScript API 趨於成熟。¹
• model 的嵌入方式如同媒體：將 src 指向一個 USDZ 檔案、像 <video> 那樣加上帶 MIME 類型的 <source> 標籤，並在其中巢狀一個 <img>，作為尚不支援該元素的瀏覽器的後備內容。¹
• ready promise 會在 model 載入完成時告知您，讓您可以換掉載入動畫；catch 區塊則在失敗時顯示後備內容。¹
• stagemode="orbit" 屬性僅憑一個屬性就賦予互動式旋轉；若需腳本化控制，可將 stagemode="none"，並以透過 rotateSelf 建立的 DOMMatrix 驅動 entityTransform。¹
• 烘焙動畫透過 playbackRate 搭配 play() 播放，負值會反向播放，而將 model 包進 <a rel="ar"> 中，就能讓 iOS 與 iPadOS 的訪客獲得完整的 AR Quick Look 體驗。¹

實際推出了什麼

來自 Safari 團隊的 Aleksei 從 0:37 開始說明此次跨平台擴展。

這裡的誠實定位很重要。<model> 元素並非全新事物。Apple 先在 visionOS 上推出它，在那裡它內建了立體渲染，讓商品在 Apple Vision Pro 上感覺真的具有深度。¹ WWDC 2026 在這個基礎之上做了兩件事：把該元素帶到 iOS、iPadOS 與 macOS 的 Safari，使得「您的 3D 內容能觸及每一位 Safari 訪客，無論他們是在外出途中用 iPhone、在咖啡店用 iPad，還是在辦公桌前用 Mac」；同時也充實了那套把靜態檢視器變成互動式檢視器的 JavaScript API。¹

針對現狀的論點很直接。如今網路上多數 3D 都透過熱門的 JavaScript 函式庫 model-viewer 運作。Apple 的論點是：原生元素不需額外函式庫、由「平台直接」渲染，而且是「一項正在成形的網路標準，因此您的程式碼能面向未來」。¹ Apple 的 Safari 團隊表示，他們正「積極為 W3C 的 model 規格做出貢獻」，並透過 Immersive Web Community Group 邀請各界回饋。¹ 對於尚不支援該元素的瀏覽器，該議程指出有一個 polyfill 可「透過 JavaScript 改裝出新標準的 API」，但有一個值得引述的注意事項：「該元素的某些功能無法以 polyfill 實現，例如 Apple Vision Pro 等空間平台上的立體顯示。」¹

內容格式是 USDZ，即「Universal Scene Description，壓縮成單一檔案」，它「打包了 3D model 所需的一切：幾何、材質、紋理、動畫」。¹ Safari 支援其他格式，但該議程建議使用 USDZ 以獲得最佳體驗。¹ 至於這些素材從何而來，則是另一個問題。Apple 建議採用「擷取、轉換、創作」（Capture, Convert, Create）的方法：用 iPhone 掃描真實物體、轉換既有檔案，或在 Blender 等工具中從零打造。¹ 該議程也提到生態系中存在生成式工具；被點名的應用 Tripo3D 與 Meshy.ai 是第三方服務，並非 Apple 產品。¹

在頁面上放入一個 model

該元素的行為就像每位網頁開發者早已熟知的媒體標籤。「就像 <img> 標籤或 <video> 標籤一樣，您用 source 屬性把 <model> 標籤指向一個檔案，剩下的就交給瀏覽器。不需要任何外掛。」¹ 您也可以使用帶 MIME 類型的巢狀 <source> 標籤，與 <video> 採用相同模式（議程示範了這個模式但未點名其值；model/vnd.usdz+zip 是標準的 USDZ 媒體類型）。後備內容正是讓今日採用變得安全的關鍵：在 <model> 內放入一個 <img>，較舊的 Safari 版本或不支援的瀏覽器就會改為呈現這張圖片。¹

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

3D model 可能達「數十 MB 甚至更多」，因此載入需要時間。¹ ready promise 會在 model 確實載入完成、可供顯示時才解析（resolve）。在等待時顯示載入動畫，待 ready 解析後將其隱藏，並在 catch 區塊中藉由顯示後備內容來處理任何意外狀況：

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
}

有一個渲染細節常讓人踩雷。<model> 元素「是在它自己的虛擬空間中渲染的，因此不會沿用頁面的背景」。¹ 若要與頁面設計相搭，請直接在 model 上設定 background-color。該議程補充了一個限制：「背景永遠以不透明方式渲染，即使您指定帶透明度的顏色，也會被轉換掉。」¹

讓訪客探索它

最廉價的互動只需一個屬性。有了 stagemode="orbit"，訪客就能「自由地左右旋轉 model，若上下傾斜，它會輕柔地彈回原本的角度」。¹ model 也會稍微縮小重新縮放，讓任何部位在旋轉過程中都不會被裁切。¹ 對多數商品頁而言，這一個屬性就是整個功能：「orbit stagemode 讓您只憑一個屬性就獲得互動式 3D。」¹

當您需要精確的角度時，改用 JavaScript 來驅動 model。entityTransform 屬性「讓您透過 JavaScript 設定精確的觀看角度」。¹ 要使用它，請先停用 orbit，移除 stagemode 屬性或將其設為 "none" 皆可。¹ 該議程提醒，若手動變換把 model 旋轉到可見範圍之外，可能會裁切或隱藏 model 的部位，因此您可能需要調整位置。¹ 您以 DOMMatrix 建立方向，它「代表 model 在 3D 空間中的方向」，呼叫 rotateSelf 定義旋轉，再將其指定回去：

// 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;
});

指定一個變換會即時切換視角。為了讓過渡更平滑，該議程以 requestAnimationFrame 來為旋轉製作動畫，採用 500 毫秒的動畫時長，「半秒鐘，感覺俐落又流暢」，在逐幀之間為旋轉緩動，並在每一幀以全新的 DOMMatrix 更新 entityTransform。¹ 用 Apple 自己的話來說，誠實的取捨是：自訂變換「給您完整的掌控，但需要額外的工作：邊界框、裁切、手寫的動畫程式碼」。¹ 需要時就動用腳本化變換，不需要時就倚靠 stagemode="orbit"。

播放烘焙動畫，然後進入 AR

model 也能自帶動態。動畫「通常在 Blender 或 Maya 等 3D 工具中製作，並烘焙進 USDZ 檔案」，而該元素「會播放第一條動畫軌」。¹ 兩行 JavaScript 即可控制播放：在 model 上設定 playbackRate，然後呼叫它的 play() 方法。正值向前播放，負值反向播放，議程使用 5 與 -5 來加快播放速度：

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

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

最後一步把商品帶離螢幕、帶進房間裡。「將 model 包進一個帶 rel="ar" 屬性的 <a> 標籤、指向同一份資源，那麼在 iOS 與 iPadOS 上，您的顧客就能獲得完整的 AR Quick Look 體驗。」¹

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

在 visionOS 上，該元素早已讓 3D「感覺像是網路自然的一部分」，其立體渲染讓顧客「把商品從頁面中拉出來，彷彿就在自己手中那樣端詳」，並驅動了把訪客置身於某個場景中的沉浸式網站環境，直接從 Safari 體驗。¹

把它做得更小再出貨

本機檔案看起來很棒；同樣的檔案經由網際網路傳輸卻載入緩慢。該議程對 model 執行了一個命令列工具 usdcrush：「在品質毫無變化的情況下，檔案從 7.9 MB 降到 1.9 MB」，而兩個版本在 Safari 中並排打開看起來一模一樣。¹ 另一個搭配的工具 usdrecord，能在您尚無縮圖或後備圖片時，直接從 3D 檔案產生一張，並提供諸如輸出格式、或從檔案中自訂相機渲染等選項。¹ 這兩個工具「已經安裝在您的 Mac 上」，是更大型的 USD 套件的一部分，而議程也指出您可以對整個目錄以腳本批次執行 usdrecord。¹ 至於格式本身，Alliance for OpenUSD 公布了完整的 USDZ 規格，作為「一份清晰、廠商中立的參考」，並附帶轉換工具。¹

實驗室在尺寸與載入上補充了什麼

WWDC 實驗室補上了議程未說盡的幾項細節。

在壓縮方面，usdcrush 現在會把紋理編碼為 AVIF；先前使用的是 JPEG。² Apple 也表示，正在與 Alliance for Open Media 討論一種合適的網格壓縮格式。²

在尺寸方面，該座談未給出硬性上限，但建議頁內 model 的最高視覺品質落在約 10 MB 左右。沉浸式環境則可以合理地更大。²

在載入方面，座談承認了一個缺口：目前並沒有對應 model 載入狀態的 CSS 偽類，因此前面提到的 ready promise 正是擔此重任的工具。² 座談也劃出了一個值得謹記的兩階段區別：位元組已下載，並不等於資源已被處理、可供使用。²

重點整理

對網頁開發者： - 今天就加上 <model>，並在其中巢狀一個 <img> 後備內容，如此不支援的瀏覽器會降級為靜態圖片，而支援的 Safari 會自動升級為互動式 3D。¹ - 以 ready promise 把關顯示時機，並在 catch 中處理失敗，因為一個數 MB 的 USDZ 確實需要不少時間載入。¹

對 3D 美術人員： - 在 Blender 或 Maya 中把您的第一條動畫軌烘焙進 USDZ；該元素會播放它，並開放 playbackRate 搭配 play() 來控制正向與反向播放。¹ - 出貨前先執行 usdcrush，在無可見品質損失的情況下縮小檔案，並以 usdrecord 從 model 本身產生 <img> 後備內容。¹

對產品與電商團隊： - 使用 stagemode="orbit" 獲得只需一個屬性的互動式旋轉，並把腳本化的 entityTransform 保留給需要精確角度或自訂 UI 的情境。¹ - 將 model 包進 <a rel="ar">，讓 iOS 與 iPadOS 的購物者能透過 AR Quick Look 把商品放進自己的空間。¹

FAQ

HTML <model> 元素是 2026 年才全新登場的嗎？

不是。Apple 先在 visionOS 上推出了 <model> 元素。WWDC 2026 以相同的標記把它擴展到 iOS、iPadOS 與 macOS 的 Safari，並讓圍繞它的 JavaScript API 趨於成熟（ready promise、entityTransform、烘焙動畫播放，以及 <a rel="ar">）。¹

我該如何為不支援 <model> 的瀏覽器加上後備內容？

在 <model> 標籤內巢狀一個 <img> 標籤。較舊的 Safari 版本與尚不支援該元素的瀏覽器會改為呈現這張圖片，讓訪客仍能看到商品。也有一個 polyfill 可用，不過某些功能（例如 visionOS 的立體顯示）無法以 polyfill 實現。¹

<model> 元素使用什麼檔案格式？

USDZ，即把 Universal Scene Description 壓縮成單一檔案，其中打包了幾何、材質、紋理與動畫。Safari 支援其他格式，但 Apple 建議使用 USDZ 以獲得最佳體驗，而 Alliance for OpenUSD 也公布了完整規格。¹

我該如何讓一個 model 變得可互動？

設定 stagemode="orbit" 即可獲得只需一個屬性的自由左右旋轉。若要精確的角度，請設定 stagemode="none"、以 rotateSelf 建立一個 DOMMatrix，並把它指定給 model 的 entityTransform 屬性，若想要平滑過渡，再以 requestAnimationFrame 逐幀製作動畫。¹

我該如何把一個網頁 model 帶進擴增實境？

把 <model> 包進一個帶 rel="ar" 屬性、指向同一份 USDZ 資源的 <a> 標籤。在 iOS 與 iPadOS 上，這會讓訪客獲得完整的 AR Quick Look 體驗，使他們能把商品放進自己的環境中。¹

<model> 元素奠基於 Apple 正在各平台推動的同一套 USD 基礎：請參閱 Apple 全新的 Swift 原生 USD 框架 USDKit，以及 visionOS 27 的新功能 中的空間運算脈絡。「以標籤取代函式庫」的論點，呼應了 no-build 宣言 與 HTML 才是代理想要的格式 中更廣泛的論述。完整系列彙整於 Apple 生態系系列。

參考資料