gltfjsx

用命令列工具把 glTF 或 GLB 模型產生為可重用的 React Three Fiber 元件。

  • glTF
前往 gltfjsx 官方網站

它能做什麼

gltfjsx 是處理 glTF 與 GLB 資產的命令列轉換工具。官方使用指南示範產生 React Three Fiber JSX 元件,以具名網格和材質在程式碼中存取模型部件。--types 可加入 TypeScript 型別;--transform 另產生適合網頁使用的最佳化 GLB。依資產需求選用即可。

適合誰

想在 React Three Fiber 場景中放置、重用模型,或替部件加入互動的 React 開發者,可以考慮 gltfjsx。Spline 用視覺介面製作互動 3D 場景;gltfjsx 從匯出的模型產生程式碼,本身不是建模編輯器。

第一步與使用界線

對有使用權的模型執行 npx gltfjsx model.glb,把資產放進應用程式的 public 資料夾,再將產生的元件匯入 Canvas。官方指南列有 Node.js 與 React Three Fiber 相關依賴。加入互動前,應檢查節點名稱、材質與動畫。檔案轉換不會授予紋理或模型幾何的使用權;若啟用最佳化,也要檢查模型外觀及行為。

gltfpack

meshoptimizer 提供、用於最佳化 glTF 資產的命令列工具。

  • gltf
  • optimization
  • 3d-assets

glTF

Needle Viewer

可在網頁中開啟與檢視 glTF 模型的工具。

  • gltf
  • viewer
  • 3d-assets

glTF

Aceternity UI

Aceternity UI 收錄帶有視覺動效的 React 元件。

  • components
  • react

元件