r3f-loaders

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
name: r3f-loaders
description: Load and reuse 3D assets in React Three Fiber with useGLTF, useLoader, Suspense, and preloading. Use for model loading, decoder setup, caching, cloning, or loading/error UI.
---

# React Three Fiber loaders

Inspect installed Fiber, Drei, Three.js, and React versions first. Examples use Fiber 9 / React 19. Verify actual asset paths, node names, formats, and compression; do not invent a model's structure.

## Load and reuse a model

Mount below Canvas. Supply `/models/robot.glb` in the application. These clones have separate object transforms but intentionally share cached geometry/materials.

```tsx
import { Suspense } from 'react'
import { Clone, useGLTF } from '@react-three/drei'

function Models() {
  const { scene } = useGLTF('/models/robot.glb')
  return (
    <group dispose={null}>
      <Clone object={scene} position={[-1.2, 0, 0]} />
      <Clone object={scene} position={[1.2, 0, 0]} />
    </group>
  )
}

export default function Example() {
  return (
    <Suspense fallback={null}>
      <Models />
    </Suspense>
  )
}
```

## Loading decisions

- Prefer `useGLTF` for glTF/GLB; use `useLoader` with the matching Three.js loader for other formats. Fiber 9 also accepts an externally owned loader instance when configuration isolation is needed.
- Loader hooks suspend. Put boundaries around assets that should reveal together; separate boundaries for independent loading. Preload likely-needed assets ahead of interaction, not the entire catalog.
- Preloading starts a request; it does not guarantee instantaneous display or GPU shader compilation. Asset decoding and first rendering can still cost time.
- Conditional loading means conditionally mounting a child component that calls the hook. Do not pass `null` as a pretend URL or call a hook conditionally.
- Three.js addons use paths such as `three/addons/loaders/GLTFLoader.js`. Check installed exports for renamed loaders; modern Three.js uses `HDRLoader` where older examples used `RGBELoader`.
- Use gltfjsx with types when exposing named nodes/materials is useful, and inspect the generated result. For wrappers, use `ThreeElements['group']`, not the removed global JSX type namespace.

## Cache, clones, and lifetime

- Treat cached loader results as shared. Mounting one Object3D under two parents moves it between them; clone the graph for repeated placement.
- Drei Clone supports ordinary graph duplication and skeleton-aware cloning. For independent animation mixers, a stable `SkeletonUtils.clone` root makes ownership explicit.
- A graph clone normally shares geometry, textures, and materials. Clone the specific material/texture before per-instance edits; deep-cloning everything wastes memory.
- Prevent an individual consumer from disposing shared cached resources (`dispose={null}` on the shared subtree). An application cache owner may release them only after all consumers are gone.
- Primitives are not automatically disposed by R3F. Neither `useGLTF.clear(url)` nor `useLoader.clear(...)` is a complete GPU cleanup operation.
- Do not clear caches during render, and do not mutate a cached scene's transforms/materials as a local setup shortcut.

## Decoders and failure paths

- `useGLTF` integrates Draco/Meshopt support, but decoder URLs and loader configuration must match the asset and hosting policy. For KTX2 textures, configure a KTX2Loader with renderer capability detection before loading.
- Use the same loader/decoder settings for preload and actual load. Configure before requests start; later changes do not retroactively reparse an already cached result.
- Avoid creating a new decoder worker pool in every render or load callback. Give custom loader/decoder instances a deliberate owner and cleanup.
- Suspense handles pending work, not rejected requests. Use an error boundary with an explicit retry/remount strategy; cache eviction for retry belongs in a user action or controlled recovery path.
- Inside Canvas, use a Three.js fallback or Drei