Can drei or R3F dispose resources with useGLTF()?

[FrostKiwi]

Right now I have a lot of non-declarative code to handle the cleanup on component unmounting of VRAM resources, as seemingly(?) gltf loading does not do so by itself. gltfjsx even inserts a disposal={null} at the top group of GLTFs it imports, a thing I don't understand either.
As such, loading and unloading GLTFs blows through the VRAM budget on weak smartphones.

For myMachine.dmgmori.com I call Material.dispose and Texture.dispose on each child texture of that material and BufferGeometry.dispose for Geometry and Skeleton.dispose on skeletons.

Only that way can I exchange many 3D Machine Options and not blow through VRAM. Even worse actually, useGLTF() reallocates Geometry each time it mounts, so there is even a VRAM memory leak with useGLTF()

So all this cleanup, I must do imperatively: Can't R3F / Drei / the gltfjsx structure handle that for me?

[sunnypatell]

@FrostKiwi short answer: no, neither R3F nor drei automatically deep-disposes GLTF GPU resources on unmount. you have to do it yourself. here's why and the correct pattern.

why dispose={null} exists in gltfjsx output: useGLTF caches loaded data via suspend-react. if R3F auto-disposed meshes on unmount, remounting the same component would find corrupted GPU resources in the cache. so gltfjsx disables disposal to protect the cache.

why useGLTF.clear(url) isn't enough: it only removes the JS-side cache entry from suspend-react. it does NOT call .dispose() on any three.js objects. your geometries, textures, and materials stay in VRAM. (drei#1590 confirms this)

why R3F's auto-disposal misses textures: the reconciler's removeChild calls .dispose() on the R3F-managed instance, but a Mesh doesn't have a .dispose() in three.js. only BufferGeometry, Material, and Texture do. R3F doesn't traverse into materials' texture maps or skeletons.

the correct cleanup pattern:

function Model({ url }) {
  const gltf = useGLTF(url)

  useEffect(() => {
    return () => {
      useGLTF.clear(url) // free JS cache

      gltf.scene.traverse((child) => {
        if (child.isMesh) {
          child.geometry?.dispose()
          const mats = Array.isArray(child.material)
            ? child.material : [child.material]
          for (const mat of mats) {
            for (const key of Object.keys(mat)) {
              if (mat[key]?.isTexture) mat[key].dispose()
            }
            mat.dispose()
          }
        }
        if (child.skeleton) child.skeleton.dispose()
      })
    }
  }, [gltf, url])

  return <primitive object={gltf.scene} dispose={null} />
}

you need both useGLTF.clear() (releases cache reference) AND the manual traverse (frees VRAM). there's no built-in utility for this in drei yet.

action	clears JS cache	frees VRAM
unmount with auto-disposal	no	shallow only, misses textures
dispose={null}	no	no
useGLTF.clear(url)	yes	no
manual traverse + dispose	no	yes
both combined	yes	yes

ref: R3F disposal docs | drei#1590 | drei#1911 | three.js dispose guide

[FrostKiwi]

My code is pretty close to that, but executed in the "Slice with an Animation" (I make machine options appear and disappear by slicing them into existence in the link above) component though, I leave had the JS Cache stuff untouched, as I wasn't too worried about closing through RAM.

A useEffect und return{} that's a smart pattern!
@sunnypatell does that pattern (use effect with return) imply that if the GLTFJSX becomes unmounted, once the parent kills that that effect will run and do the cleanup? Or is it a situation like with "exit animations" where unmounting doesn't leave enough time for the Animation (eg a fade to zero) to finish and disappear instantly, but in our case where unmounting wouldn't let the useEffect finish the VRAM cleanup?

[sunnypatell]

@FrostKiwi yes, the useEffect return cleanup runs synchronously when the component unmounts, so it will always execute the traverse + dispose calls before React removes the component tree. it's not like exit animations where you need the component to stay mounted.

the key distinction: dispose() on a three.js texture/geometry/material is a synchronous GPU deallocation command sent to WebGL via gl.deleteTexture(), gl.deleteBuffer(), etc. there's no async work or animation frame needed. the GPU resources are released immediately when dispose() is called, even if React is tearing down the component.

so the cleanup order is:

1. React triggers unmount of <Model />
2. useEffect return fn runs synchronously
3. scene.traverse(...) walks every child and calls .dispose() on geometries/materials/textures
4. GPU memory is freed immediately
5. React removes the fiber node

the only gotcha: if you're using useGLTF.preload(url) elsewhere, the JS cache entry still holds a reference to the (now GPU-disposed) objects. so if another component tries to mount the same model later, it'd get corrupted references. that's when you'd pair it with useGLTF.clear(url) in the same cleanup to also evict the cache.

for your slicing animation case, since you're mounting/unmounting models dynamically, the useEffect cleanup pattern is exactly what you want.