Reactjs/Threejs

[React / Three] GLTFJSX

Watertight 2023. 7. 3. 18:54

 

 

사용법 : Terminal에서 gltf 파일을 JSX로 변환하여 사용

 

Command

npx gltfjsx [Model.glb] [options]

Options

--output, -o        Output file name/path
--types, -t         Add Typescript definitions
--keepnames, -k     Keep original names
--keepgroups, -K    Keep (empty) groups, disable pruning
--meta, -m          Include metadata (as userData)
--shadows, s        Let meshes cast and receive shadows
--printwidth, w     Prettier printWidth (default: 120)
--precision, -p     Number of fractional digits (default: 3)
--draco, -d         Draco binary path
--root, -r          Sets directory from which .gltf file is served
--instance, -i      Instance re-occuring geometry
--instanceall, -I   Instance every geometry (for cheaper re-use)
--transform, -T     Transform the asset for the web (draco, prune, resize)
  --resolution, -R  Resolution for texture resizing (default: 1024)
  --keepmeshes, -j  Do not join compatible meshes
  --keepnormals, -n Do not compress normal maps with loss
  --keepmaterials, -M Do not palette join materials
  --format, -f      Texture format (default: "webp")
  --simplify, -S    Mesh simplification (default: false)
    --weld          Weld tolerance (default: 0.00005)
    --ratio         Simplifier ratio (default: 0)
    --error         Simplifier error threshold (default: 0.0001)
--debug, -D         Debug output

 

예시)

npx gltfjsx public/models/Frog.gltf -o "src/components/Frog.jsx" -r "public"