model-viewer是一個專門用來在網頁上顯示 3D 模型（並支援 AR/擴增實境） 的前端元件 / 工具平台。官方標題為 “<model‑viewer> — Easily display interactive 3D models on the web & in AR”。
簡單來說，它提供一個自訂標籤 ，讓開發者可以比較容易地把 3D 模型嵌入網頁，並且支援互動、動畫、AR 模式等功能。這樣就不需要自己從底層寫 WebGL 或 Three.js 那麼多設定。
功能與特色
-
簡單嵌入
使用 HTML 標籤即可將 3D 模型嵌入網頁，無需額外 JavaScript 程式碼。 -
內建互動功能
支援旋轉、縮放、鏡頭控制，甚至可以預設模型動畫自動播放。 -
支援主流 3D 模型格式
最佳支援.glb和.gltf格式，也支援動畫與 PBR 材質。 -
原生支援 AR 模式
在支援 WebXR 的瀏覽器（如 Chrome Android、iOS Safari）中可以點擊「AR」按鈕將模型投射至真實世界。 -
燈光與環境設定
可以設定環境光、方向光、背景 HDR 圖像，強化展示效果。 -
支援延伸擴充功能
可搭配加入光暈、景深、描邊等視覺特效。 -
可自訂預覽圖與加載動畫
支援自訂 Poster 圖片與 Loading Spinner，提升使用者體驗。 -
跨平台與瀏覽器相容
支援桌機與手機瀏覽器，包含 Chrome、Firefox、Edge、Safari 等。
簡單嵌入到網頁的範例
以下是一段最基本的 HTML 嵌入範例，只需要載入官方套件並插入 ：
參數說明：
-
src：模型檔案路徑（建議使用.glb） -
alt：替代文字（提升無障礙與 SEO） -
auto-rotate：讓模型自動旋轉 -
camera-controls：啟用滑鼠／手指控制鏡頭 -
ar：啟用 AR 模式 -
style：設定顯示區塊的寬高
model-viewer 標籤也可以用 CSS 控制，你可以透過 CSS 讓他做 RWD 的縮放。
model-viewer 是一個相當方便、現代的 Web 元件，能讓你在網頁上快速嵌入 3D 模型並具備互動與 AR 能力。對於想在網頁上展示產品 3D 模型、建築視覺化、線上展覽之類的應用來說，是一個非常實用的工具。
我覺得這種工具最吸引人的地方是「門檻低、效果相對不錯」，開發者可以省去不少底層架構的麻煩。但要發揮到極致，仍可能需要搭配其他技術或自行做客製化調整。
