AR，VR和HTML中3D的模型

Safari Technology Preview 161 引入的新HTML元素和屬性 <model></model> 及其相關屬性，引發了廣泛關注。本文將深入探討 <model></model> 元素的演變歷程、功能以及未來發展方向。

最初，<model></model> 元素的構想源於提升 Safari 與 iOS AR Quick Look 功能集成的體驗需求。 AR Quick Look 允許用戶通過手機攝像頭將 3D 產品模型疊加到現實環境中，例如一些商店已採用的虛擬試用功能。

從 WebKit 的解釋器中可以了解到，<model></model> 元素的最初提案來自 Immersive Web 委員會。該委員會致力於將虛擬現實 (VR) 和增強現實 (AR) 技術融入 Web。提案指出，HTML 雖然支持多種媒體類型，但缺乏直接顯示 3D 內容的聲明式方法。嵌入 3D 內容通常需要藉助腳本操作 <canvas></canvas> 元素，較為繁瑣。 <model></model> 元素旨在像其他視覺媒體一樣方便地嵌入交互式 3D 模型。模型可以由 3D 建模工具創建或動態生成，但由服務器作為獨立資源提供。

一個基本的例子如下，其使用方式類似於 <video></video> 或 <audio></audio> 元素：

<model style="width: 400px; height: 300px"></model>

<model></model> 元素支持的文件類型，例如 .usdz 或 .glb，有待進一步明確。

目前，<model></model> 元素的草案提案尚未完全制定完成，但已概述了其未來可能的發展方向，包括：向文檔中添加模型、啟用交互性、支持多種格式、提供備用內容以及確保可訪問性等。提案中也列出了許多待解決的問題。一些擬議的屬性，例如 autoplay、controls、loop、muted 和 poster，使其更類似於 <video></video> 元素。

早在 2018 年，Keith Clark 就曾發布過一篇博客文章，其中他原型設計了一個名為 <x-model></x-model> 的自定義元素，用於加載和渲染三維模型。 2020 年，Joe Medley 又分享了 <model-viewer></model-viewer> 組件，並為其創建了主頁。

目前，<model></model> 元素的標準化仍在進行中。 Apple 通過 Safari TP 161 的發布表示支持，這與 Apple 對 AR 技術的重視相符。 Google 也參與其中，但主要集中在 Web Components 方面。 Apple 和 Google 對 Web 上 AR 技術的願景可能存在差異，這可能會導致一些衝突。

總而言之，<model></model> 元素的出現為 Web 上 3D 模型的展示和交互提供了新的可能性，但其發展仍處於早期階段，未來發展值得期待。 值得注意的是，Safari Technology Preview 162 版本已發布，它支持 CSS 嵌套和 CSS 相對顏色語法。

以上是AR，VR和HTML中3D的模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！