How to Optimize GLB Files for React Three Fiber

React Three Fiber does not use a separate glTF format. Drei'suseGLTF builds on Three.js GLTFLoader, and gltfjsx turns the loaded scene graph into reusable React components. That means the asset, Three.js decoder setup, Suspense behavior, and generated component must all agree. Optimize first with a clear target, then generate React code without accidentally applying a second lossy transformation.

Use the right pipeline order

1. Keep an untouched source model.
2. Validate and preview the source.
3. Optimize the asset once for the intended runtime.
4. Generate JSX from the optimized output.
5. Test the generated component in the production Canvas configuration.

The order matters because gltfjsx --transform is itself an optimization pipeline: it prunes, resizes textures, converts them to WebP, and applies compression. Running it after an already optimized file can resize or recompress textures again. For OptimizeGLB output, generate JSX without --transform unless that second pass is an explicit, visually reviewed choice.

A safe starting preset

• Enable deduplication and pruning.
• Keep simplification off.
• Cap general web textures at 2048 pixels where visual detail allows.
• Use WebP around quality 80-85 only when every browser and downstream viewer in scope supports it.
• Keep geometry uncompressed until the deployed useGLTFdecoder path has been tested.

This is a good first pass in OptimizeGLB because it reduces waste without changing the mesh silhouette or adding a mandatory WASM geometry decoder.

Understand Drei's decoder defaults

useGLTF supports Draco and Meshopt. Its convenient Draco default can use a remote decoder, but production applications should consider a pinned, self-hosted decoder path so a model does not depend on an unrelated network request. If the app disables Draco or Meshopt, the optimized asset must not require that extension.

KTX2 needs an additional step. Create a Three.jsKTX2Loader, set its transcoder path, detect renderer support, and attach it through the fourth extendLoaderargument to useGLTF or the corresponding<Gltf extendLoader=... /> API. Configure it before the first model load.

GLB is usually easier than glTF in React apps

A GLB can live as one hashed or public asset. A .gltf file may fetch sidecar buffers and textures at runtime, so every relative path must survive the bundler and deployment. If you do use JSON glTF, put the complete directory in the public asset tree or configure the gltfjsx root path correctly. Do not import only the JSON file and expect the bundler to discover string-based resource references.

Plan loading and error states

R3F loader hooks suspend while an asset loads. Place the model under a meaningful Suspense fallback and an error boundary. Preload the most important asset only when the user is likely to need it; preloading a collection of large models can move the cost earlier without reducing it. Show decoder, missing-resource, and parse failures to the user rather than leaving a blank Canvas.

Watch GPU memory when models change

Loader results are cached. That is excellent for frequently remounted models, but dynamic catalogs can retain geometries, materials, and textures longer than expected. Decide whether a model should remain cached, and explicitly dispose GPU resources when permanently removing unique assets. File compression reduces transfer bytes; it does not eliminate decoded texture or geometry memory.

React Three Fiber release checklist

1. Validate the optimized GLB.
2. Generate JSX without an unintended second transform.
3. Test direct useGLTF loading and the generated component.
4. Exercise Suspense, error, and slow-network states.
5. Verify animations, variants, shadows, and event hit areas.
6. Profile transfer, decode, GPU memory, and frame time separately.