隆重推出 1.1

建立網頁的 3D 模型就像撰寫 HTML 一樣簡單。

喬梅利
Joe Medley
GitHub
羅伯科克曼
Rob Kochman
X

3D 模型的重要性更勝以往。零售商為顧客的家提供店內購物體驗博物館正在將作品的 3D 模型 開放給網路上所有人使用遺憾的是，要在網站中加入 3D 模型並不容易，因為如果沒有對 3D 技術的深入瞭解，或連向第三方網站代管 3D 內容，卻能提供良好的使用者體驗。2019 年初推出的 <model-viewer> 網頁元件旨在簡化將 3D 模型放到網路中的位置，就像編寫幾行 HTML 一樣簡單。自那時起，團隊成員便持續努力解決 社群的意見回饋和要求之前的推手是 <model-viewer> 1.0 版，於今年稍早發布。現在我們宣布推出 <model-viewer> 1.1 版。您可以在 GitHub 中參閱版本資訊。

自去年以來有什麼新功能？

1.1 版本包含網頁版的擴增實境 (AR) 支援、改善速度和擬真度，以及其他要求使用者經常要求的功能。

擴增實境

在空白畫布上查看 3D 模型固然很好，但是在空間中檢視 3D 模型會更好。針對完全在瀏覽器中的 3D 和 AR，Chrome Android 支援使用 WebXR 的進階實境。

示範 <model-viewer> AR 功能。

準備就緒後，您只要在 <model-viewer> 標記中加入 ar 屬性，即可使用該屬性。其他屬性則可讓您自訂 WebXR AR 體驗，如 modelviewer.dev 上的 WebXR 範例所示。下方的程式碼範例所示。

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

也就是這個標題下方顯示的內嵌影片。

相機控制項

<model-viewer> 現在可完全控制檢視畫面的虛擬相機 (視角)。包括攝影機目標、軌道 (相對於模型的位置) 和視野。您也可以啟用自動旋轉功能，並設定使用者互動的限制 (例如視野上限和下限)。

註解

您也可以使用 HTML 和 CSS 為模型加上註解。這項功能通常用於「附加」標籤，並隨模型一併「附加」到模型的某些部分。註解可以自訂，包括其外觀以及模型隱藏的程度。AR 也支援註解功能。

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>
印有「太空衣」註解的註解。
附有註解的太空衣。

詳情請參閱註解說明文件頁面。

編輯者

1.1 版導入及代管 <model-viewer> 「編輯」工具，可讓您快速預覽模型、試用不同的 <model-viewer> 設定 (例如曝光和陰影柔和度)、產生海報圖片，並以互動方式取得註解的座標。

轉譯作業與效能改善

可大幅提升算繪擬真度，特別適用於高動態範圍 (HDR) 環境。現在當可視區域中只有一個 <model-viewer> 元素時，<model-viewer> 也會使用直接轉譯路徑，因此會提升效能 (特別是在 Firefox 中)。最後，動態調整轉譯解析度可大幅改善影格速率。以下範例顯示這些近期改善項目。

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>
戴得精美頭盔的 3D 模型。
戴高頭盔的 3D 模型。

穩定性

由於 <model-viewer> 推出第一個主要版本，API 穩定性是優先事項，因此在 2.0 版發布之前，避免發生破壞性變更。

後續步驟

<model-viewer> 1.0 版包含要求最多的功能，但團隊尚未完成。日後也將加入更多功能，並改善效能、穩定性、說明文件和工具。如有任何建議，歡迎在 GitHub 中提交問題。我們也歡迎 PR 提供建議。您可以透過 Twitter 追蹤 <model-viewer>，以及查看 Spectrum 的社群即時通訊。