模型檢視器> 網頁元件

在網站中加入 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">

回應式設計

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

使用先前介紹的編輯器建立代表圖片後,即使 <model-viewer> 的顯示比例對應到不同的螢幕大小,也能讓單一圖片符合 3D 算繪。

多張太空裝圖片代表反應速度。
多張太空套裝圖片代表回應速度。

更多功能

如需更多進階功能的示範,請參閱 <model-viewer> 說明文件。包括新增地面投射天空箱、建立動畫紋理熱點