建立網頁的 3D 模型就像撰寫 HTML 一樣簡單。
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
屬性,即可使用該屬性。其他屬性則可讓您自訂 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>
穩定性
由於 <model-viewer>
推出第一個主要版本,API 穩定性是優先事項,因此在 2.0 版發布之前,避免發生破壞性變更。
後續步驟
<model-viewer>
1.0 版包含要求最多的功能,但團隊尚未完成。日後也將加入更多功能,並改善效能、穩定性、說明文件和工具。如有任何建議,歡迎在 GitHub 中提交問題。我們也歡迎 PR 提供建議。您可以透過 Twitter 追蹤 <model-viewer>
,以及查看 Spectrum 的社群即時通訊。