Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

模型檢視器> 網頁元件

在網站中加入 3D 模型可能很棘手，但 <model-viewer> 就像編寫 HTML 一樣簡單。

Joe Medley

在網站中加入 3D 模型並不容易。3D 模型最好在檢視器中顯示，檢視器可在所有瀏覽器上回應，包括智慧型手機、桌上型電腦，甚至是新的頭盔顯示器。檢視器應支援漸進增強功能，以提升效能和算繪品質。它應支援所有裝置上的用途，從較舊、低功率的智慧型手機，到支援擴增實境的新裝置。應與時俱進，跟上最新技術。應具備高效能和無障礙功能。不過，建構這類檢視器需要專業的 3D 程式設計技能，對於想自行託管模型，而非使用第三方託管服務的網頁程式開發人員來說，可能是一大挑戰。

不過，<model-viewer> 網頁元件可讓您以宣告方式將 3D 模型新增至網頁，同時將模型託管在自己的網站上。這個元件的目標是讓您在不瞭解基礎技術和平台的情況下，也能在網站中加入 3D 模型。網頁元件支援回應式設計，以及在某些裝置上使用擴增實境等用途。包括無障礙功能、算繪品質和互動性。

什麼是網頁元件？

網頁元件是使用標準網頁平台功能建構的自訂 HTML 元素。網頁元件的行為與標準元素相同。它有專屬標記，可以有屬性和方法，也可以觸發及回應事件。簡而言之，您不需要具備任何特殊知識，就能使用任何網頁元件，更不用說 <model-viewer>。

本文將介紹 <model-viewer> 專屬功能。如想進一步瞭解網頁元件，建議您前往 webcomponents.org。

「`<model-viewer>`」可以執行的操作

以下範例說明 <model-viewer> 的部分功能。

基本 3D 模型

嵌入 3D 模型就像下列標記一樣簡單。只要使用 glb 檔案，這個元件就能在任何主要瀏覽器上運作。

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
  id="mv-shark"
   src="shark.glb"
  camera-controls
></model-viewer>

這段程式碼會顯示如下：

新增動作和互動

auto-rotate 和 camera-controls 屬性可提供動作和使用者控制項。這些並非唯一可能的屬性。如需完整的屬性清單，請參閱說明文件。

<model-viewer src="shark.glb" auto-rotate camera-controls>

使用海報圖片延遲載入

所有 3D 模型都需要時間載入，新增 poster 屬性代表在模型可供使用前，系統會顯示圖片。您可以使用編輯器產生與 3D 算繪結果完全相同的海報圖片。

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

回應式設計

這個元件會處理某些類型的回應式設計，並針對行動裝置和電腦進行縮放。此外，它還能管理頁面上的多個執行個體，並使用 Intersection Observer，在模型不可見時節省電池電力和 GPU 週期。

使用上述編輯器建立海報圖片，可讓單一圖片與 3D 算繪結果相符，即使 <model-viewer> 的顯示比例會因應不同螢幕大小而調整，也不會受到影響。