透過模型檢視器來擴增實境

我們在 2 月推出了 <model-viewer> 網頁元件。 可讓您在網頁以宣告方式新增 3D 模型，同時代管 導入程式碼我們不支援擴增實境技術。沒錯 無法在裝置的 攝影機畫面。

因此，我們開始支援 iOS 裝置的魔術 Leap 和快速查看功能。現在 我們將在新增 ar 後，開始支援 Android 上的 AR 功能 屬性。此屬性是以名為 Scene Viewer 的全新 ARCore 功能所建構。 用於檢視 3D 模型的外部應用程式。如要進一步瞭解 Scene Viewer： 請參閱透過 Android 瀏覽器以 AR 檢視 3D 模型。

火星探測車

一起來看看如何使用 <model-viewer> 擴增實境。

屬性

您應該還記得，不需要特殊知識即可使用網頁元件。這項服務 行為類似於標準 HTML 元素，擁有不重複的代碼和屬性 和方法更新後 使用 <script> 標記進行安裝 使用方法與任何其他 HTML 元素相同

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

這與我先前的文章內容大致相同。請注意 我最後特別標明瞭這是新屬性。

安裝新版本

如果您使用 <model-viewer>，表示您可能已匯入元件 完整使用 <script> 標記 ，如說明文件所示。 我們會持續改良功能。若想測試新功能 如果您有意升級及部署 (共 <model-viewer> 個)。方法是在檔案網址中加入版本號碼，如下所示 。然後觀看 發布頁面 。

<script type="module"
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

結論

立即試用新版 <model-viewer>，並與我們分享你的想法。 問題和意見回饋為 歡迎造訪 GitHub 頁面。