網頁設計遇到要使用3D動畫時，通常會使用Three.js這個套件，當使用較新版本的Three.js遇到錯誤訊息Unknown extension "KHR_materials_pbrSpecularGlossiness"，表示你的 GLTF 模型使用了 PBR Specular-Glossiness 材質工作流程，考慮重新導出模型，改使用標準的 PBR Metallic-Roughness 工作流程，如果只有 GLTF/GLB 文件，可以使用 gltf-transform 工具轉換。

為何要進行3D材質工作流程的轉換？

主要原因是KHR_materials_pbrSpecularGlossiness 擴充功能已經被 Khronos Group 封存了，因為它不再推薦用於創建新文件。Three.js 也移除了對這個擴充功能的支援。

如何轉換GLTF模型的PBR材質工作流程

筆者平時都是使用Python，以往都是利用pygltflib進行轉換，時常遇到許多細節需要進行編譯，可能無法處理所有複雜的材質情況，今天我來使用官方的 gltf-transform 工具，讓3D的轉換更準確！

首先安裝 Node.js：

1. 前往 Node.js 官方網站下載：
   • 訪問 https://nodejs.org/
   • 建議下載 LTS (Long Term Support) 版本，這是較穩定的長期支援版本
2. 下載安裝檔：
   • Windows：下載 .msi 安裝檔
   • Mac：下載 .pkg 安裝檔
   • Linux：可以使用套件管理器安裝
3. 安裝步驟（以 Windows 為例）：
   • 雙擊下載的 .msi 檔案
   • 點擊 "Next"
   • 接受授權條款
   • 選擇安裝位置（建議使用預設）
   • 點擊 "Next" 繼續安裝過程
   • 完成安裝
4. 驗證安裝：
   • 打開命令提示字元（CMD）或 PowerShell
   • 輸入以下命令檢查版本：

     bash
     node --version
     npm --version

   • 如果顯示版本號，表示安裝成功
5. 安裝完成後，您就可以使用 gltf-transform：

   bash
   npm install --global @gltf-transform/cli

6. 假設您的模型名稱是"scene.gltf"，可以執行下面轉換：

   bash
   gltf-transform metalrough scene.gltf scene_converted.gltf

轉換出來會多產生材質的圖片，如行修改讓產生的材質檔案會放置於新的資料夾內

在新版的 gltf-transform 中，我們可以這樣操作：

7. 您需要手動編輯 scene_converted.gltf 文件，更新材質路徑：

• 使用純文字編輯器打開 scene_converted.gltf
• 找到 "uri" 欄位中的材質路徑
• 將新生成的材質路徑改為 "新的指定路徑"(請使用相對路徑)

這樣可以確保所有材質檔案都在正確的位置，且保持相對路徑的正確性。請注意備份原始檔案，以防需要重新操作。