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 模型、建築視覺化、線上展覽之類的應用來說，是一個非常實用的工具。

我覺得這種工具最吸引人的地方是「門檻低、效果相對不錯」，開發者可以省去不少底層架構的麻煩。但要發揮到極致，仍可能需要搭配其他技術或自行做客製化調整。