如何把GLB嵌入網站？用model-viewer做出能旋轉自己角色3D的作品集

想把GLB嵌入網站，用Google公開的網頁元件「model-viewer」最省事。在頁面加一行用來載入的script元素，在model-viewer標籤的src屬性寫上GLB的位置，再加上camera-controls屬性，訪客就能用滑鼠或手指旋轉頁面上的3D。

本文依序整理：把GLB放上網路的三種方式有何不同、用model-viewer嵌入的步驟與主要屬性的作用、顯示不出來時怎麼排查、在手機上的表現，以及作品變多後怎麼排列。HTML程式碼本身最好連同版本號一起從官方文件複製，這樣最穩妥，所以本文只說明屬性的名稱和作用，程式碼請透過官方頁面的連結取得。model-viewer的規格都以2026年11月的官方文件為準。

※目前 Figmee 提供的是：依你畫的插畫生成的公仔風格圖像、3D模型資料（GLB / 3MF），以及3D模型的旋轉影片。實體3D列印訂購功能正在準備中（Coming Soon）。另外，照片和看起來像照片的圖片都無法做成3D（對象是畫出來的圖）。

把GLB放到網頁上有哪些方式？

讓訪客在瀏覽器裡旋轉GLB，有三種方式：「嵌入自己的網站」「傳送製作時所用服務的分享連結」「上傳到3D分享網站後再嵌入」。如果想照自己的設計放在自己的網站裡，用model-viewer嵌入最合適。

在Sketchfab上，可以透過模型頁面檢視器下方的嵌入（Embed）按鈕，取出貼到自己頁面的嵌入用HTML。官方說明也提到，非公開和設了密碼的模型也能嵌入（來源：Sketchfab Help Center「Embedding your 3D models」，2026年11月）。用分享連結展示的步驟，以及公開後看得到什麼，整理在3D模型怎麼在網路上公開。

model-viewer是什麼？

model-viewer是Google以開放原始碼（Apache License 2.0）公開的網頁元件，只要在頁面放一個標籤，就能顯示3D模型並讓人旋轉。它只能讀取glTF和GLB，官方FAQ表示今後也只打算支援這個格式（來源：model-viewer FAQ，2026年11月）。

• 載入方法：把官方README中帶有type="module"的script元素貼到頁面裡。載入來源是Google的CDN（ajax.googleapis.com），URL中間包含版本號。在npm上的套件名稱是@google/model-viewer（來源：model-viewer的README，2026年11月）。
• 版本：截至2026年11月7日，npm上的最新版本是4.4.0（來源：npm「@google/model-viewer」）。
• 支援的瀏覽器：README表示支援持續自動更新的瀏覽器（Chrome、Firefox、Safari、Edge等）桌面版與行動版的最近兩個主要版本。

Figmee的GLB把形狀和顏色（貼圖）打包成一個檔案，不需要另外上傳圖片，傳一個GLB就夠了。GLB本身的結構請見GLB檔案是什麼，什麼樣的畫適合做成3D請見插畫轉3D完整指南。

嵌入的步驟是什麼？

分5個步驟：準備GLB並瘦身、放到伺服器上、加一行載入程式碼、寫標籤與屬性、在電腦和手機上確認。在能修改HTML的網站上，第一個模型大約需要30～50分鐘。

1. 準備GLB並瘦身（10～30分鐘）：用Figmee的話，在作品畫面點選「儲存」，選擇「3D模型（GLB）」（儲存時不需要額外的代幣）。如果擔心載入慢，就依縮小貼圖、減面、壓縮的順序瘦身（步驟請見GLB檔案怎麼變小）。
2. 把GLB放到伺服器上（5分鐘）：上傳到和頁面相同的伺服器（同一網域）最簡單。放在其他網域時，需要讓那台伺服器回傳CORS標頭（請見下文「載入慢或顯示不出來怎麼辦？」）。
3. 加一行載入程式碼（2分鐘）：複製官方README中的script元素，填入版本號（例如4.4.0），貼到頁面的head裡。
4. 放置標籤並寫屬性（5分鐘）：在想顯示的位置放model-viewer標籤，src寫GLB的URL，alt寫作品說明，再加上camera-controls。其他屬性從下表挑選。標籤的寫法範例請見model-viewer文件。
5. 在電腦和手機上確認（5分鐘）：看能不能旋轉、載入時顯示什麼、在手機上能否縱向捲動頁面、顏色和光澤是否符合預期。

常用屬性如下（來源：model-viewer文件，2026年11月）：

Figmee的GLB不包含動作（動畫），所以用不到model-viewer的動畫屬性。姿勢也無法更改，想展示角色的哪個角度，就用camera-orbit設定初始相機位置來對準。

載入慢或顯示不出來怎麼辦？

什麼都沒顯示時，依序檢查GLB的URL、放置位置的網域（CORS）、載入程式碼這三項。能顯示但樣子不對時，從下表的症狀裡找。

CORS的說明在官方FAQ的「Why am I getting CORS errors?」，解碼器的預設載入位置在文件的dracoDecoderLocation、meshoptDecoderLocation項目（皆為2026年11月）。

最後一項「邊緣發亮」，是Figmee產生的GLB容易出現的現象。Figmee的GLB匯出時材質的金屬度（Metallic）設定偏高，而Figmee的檢視器會把金屬度改成0來顯示。因此，同一個GLB放到model-viewer等其他檢視器裡，雕刻的邊緣可能會像金屬一樣發亮。如果介意，可以匯入Blender，把材質的金屬度調到接近0（如果金屬度的輸入連著圖像，先斷開連結再改數值），重新匯出GLB，然後在放置的位置確認光澤有沒有改變。匯入Blender的方法請見把Figmee的GLB匯入Blender的步驟。

手機上也能旋轉嗎？

可以。model-viewer也支援手機瀏覽器，加上camera-controls後，用手指拖曳就能旋轉。需要注意的是與頁面捲動的關係，以及記憶體這兩點。

• 與捲動的關係：touch-action預設為pan-y時，手指縱向滑動會捲動頁面，橫向開始拖曳則會旋轉模型。設為none後，在模型上方頁面就不會捲動，所以把模型鋪滿螢幕時，要確認訪客還能繼續往下瀏覽。
• 記憶體：大尺寸貼圖即使檔案不大，顯示時也會占用大量記憶體，可能讓手機變卡。降低長寬解析度會有效果（詳見GLB檔案怎麼變小）。

加上ar屬性後，在支援的裝置上可以開啟AR顯示（透過相機把3D放到眼前的場景裡觀看）。Android的Scene Viewer公開了檔案大小、三角形數量等建議值，以及可用擴充的條件（來源：Google ARCore「Scene Viewer」，2026年11月），要用到AR顯示時，請用符合這些條件的GLB來測試。

作品變多後怎麼排列？

一個頁面放的模型越多，載入和記憶體的負擔就越大。列表頁每個作品放一張靜態圖（與海報相同的圖片），3D則在每個作品的獨立頁面上各放一個，這樣列表頁一般比較不容易變重。

• 列表放圖片，詳細頁放3D：訪客從列表進入作品頁面時，再展示可旋轉的3D。
• 一個頁面放多個時：預設的loading（auto）在接近可視區域時才載入，所以靠下方的模型要等訪客捲動到那裡才會讀取。全部加上poster，載入前排列也不會亂。
• 與原始插畫並排：在3D旁邊放原畫，能讓人看出是由哪張畫變成立體的。

如果沒有自己的網站，或想要一個集中展示的地方，也可以使用Figmee的創作者頁面（在「我的頁面」打開公開設定後，會產生一個列出已公開作品的個人頁面）。把GLB傳給別人觀看的方法，請見免費查看3D模型的5種方法。

常見問題

WordPress等部落格服務也能用嗎？

能不能用，取決於該服務是否允許寫入包含script元素的HTML。不允許的服務可能無法使用model-viewer。這時可以改用Sketchfab的嵌入（Sketchfab的說明中心也介紹了在WordPress等平台上的嵌入方法），或貼上分享連結。

訪客能儲存我的GLB嗎？

為了在頁面上顯示，GLB檔案會被傳送到訪客的瀏覽器。因此請以「知道URL就能儲存」為前提來放置。如果模型來自委託別人畫的圖，公開前請先徵得繪師同意（思考方式請見委託的插畫可以做成3D嗎）。

需要付費嗎？

model-viewer是開放原始碼，使用本身不收費。存放GLB的伺服器費用取決於你使用的服務。在Figmee上，產生3D模型消耗5個代幣（每個帳號的第1個免費），儲存GLB不需要額外的代幣。

總結

想把GLB嵌入網站，model-viewer最省事。先幫GLB瘦身並放到伺服器上，從官方README複製載入程式碼，以src、alt、camera-controls為基礎，再視需要加上poster或auto-rotate。顯示不出來時檢查URL、CORS和載入程式碼；邊緣發亮時檢查材質的金屬度。在手機上，要注意與捲動的關係和貼圖的大小。

想把自己角色的可旋轉3D放進作品集，可以在Figmee上用你畫的畫產生3D模型，儲存GLB，再照本文的步驟嵌入。

相關指南

• GLB檔案怎麼變小
• GLB檔案是什麼？開啟方法、用途與轉換方法
• 3D模型怎麼在網路上公開
• 免費查看3D模型的5種方法
• 插畫轉3D完整指南（2026年版）