模型檢視器> 網頁元件

將 3D 模型加入網站可能會很棘手;<model-viewer> 的使用方式就像編寫 HTML 一樣簡單。

Joe Medley
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-rotatecamera-controls 屬性可提供動作和使用者控制功能。這些並非唯一可能的屬性。如需完整的屬性清單,請參閱說明文件

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

使用海報圖片延遲載入

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

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

回應式設計

這個元件會處理某些類型的回應式設計,其可縮放行動裝置和電腦螢幕。也可管理網頁上的多個執行個體,並使用 IntersectionObserver,在模型不可見時節省電池電力和 GPU 週期。

使用先前所述的編輯器建立海報圖片,可讓單張圖片與 3D 算繪相符,即使 <model-viewer> 的顯示比例比率會根據不同的螢幕大小而有所不同。

多張太空裝圖片,代表回應式。
多張太空裝圖片,代表回應式功能。

更多功能

如需更多進階功能示範,請參閱 <model-viewer> 說明文件。包括新增地面投影 Skybox、建立動畫紋理無線基地台的功能。