利用擴增實境 (模型觀眾)

<model-viewer> 網頁元件可用於查看網路上的 3D 模型並進行互動，而且可在網路上透過擴增實境完美轉換放置這些 3D 模型並與之互動。

在支援 ARCore 的 Android 裝置上查看時，含有 ar 屬性的 <model-viewer> 元件會顯示按鈕，如以下範例所示：

模型檢視器螢幕截圖

在支援 ARCore 的裝置上輕觸這個按鈕，系統會根據 ar-modes 屬性值，使用 Chrome 的 WebXR 功能或場景檢視器應用程式顯示模型。

您可以使用網頁元件版位自訂 AR 按鈕的外觀。如需範例，請參閱 <model-viewer> documentation。如要進一步瞭解如何透過 Android 應用程式或瀏覽器，以 AR 顯示互動式 3D 模型，請參閱「情境檢視器」。

開始使用 <model-viewer>

下列步驟說明如何在任何網頁上開始使用 <model-viewer>。

新增 <model-viewer> 依附元件

來自 Unpkg CDN

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

從 npm

npm install @google/model-viewer

接著，使用偏好的套裝組合在「node_modules/model-viewer/dist/model-viewer.min.js」新增「<model-viewer>」。

加入 <model-viewer> 標記

將 <model-viewer> 網頁元件新增到 HTML 文件：

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

設定 <model-viewer> 標記

變更 <model-viewer> 標記的屬性即可設定模型顯示方式。這些屬性會提供選項，例如相機動作、模型動畫和環境資訊。<model-viewer> 說明文件列出了可設定的所有屬性。模型編輯器公用程式可以產生 <model-viewer> HTML 標記，並設定相機位置和亮度等屬性。

模型編輯器螢幕截圖

模型相容性

<model-viewer> 支援 gltf 和 glb 檔案格式的模型。 如需支援的 glTF 擴充功能清單，請參閱 three.js GLTFLoader documentation。

為確保模型能正確顯示，請在「Model Editor」(模型編輯器) 中查看模型。

瀏覽器和裝置支援

所有長期瀏覽器都支援在網頁中使用 <model-viewer> 顯示 3D 模型。我們建議在聚焦元素時使用 :focus-visible polyfill 來隱藏焦點環。

如要使用 AR 功能，必須使用支援 ARCore 的裝置，並安裝 Google Play 服務 - AR 適用。如要瞭解 webxr AR 模式，請參閱「WebXR 瀏覽器支援」。根據預設，如果不支援 WebXR，系統會改用Scene Viewer。

後續步驟