Disposing loaded GLB/GLTF files.

[srcnalt]

When I swap GLB models they are cached and immediately loaded when needed, it's great for speed however if the number of models I swap is many then a lot of unused data is accumulated in the memory. I wonder if it's somehow possible dispose of the data of the GLTF/GLB model when the component is unmounted?

...
const model = useGLTF(url)

useState(() => {
  return () => {
    model.dispose() // ?
  }
}, [url])

return ...

It would also be a great feature to add a cap for memory ot number of cached items maybe.

[drcmda]

import { dispose } from '@react-three/fiber'

function Foo() {
  const { scene } = useGLTF(url)
  useEffect(() => () => scene.traverse(dispose), [])

dispose is a small helper that we export https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/web/index.tsx#L159 but you can dispose it yourself any way you want.

[drcmda]

You must also remove the cache because it contains the raw GLTF data. You have destroyed the data, useLoader doesn't know this. Next time you load the same model it's going to serve you the old entry. And the GC will not touch it if there is a reference to it.

// Clear single item
useLoader.clear(GLTFLoader, url)

[srcnalt]

Understood, I simply did not know how to reach the cache.
Seems like useLoader from @react-three/fiber does not have a clear function, am I missing something? I am using the version 7.0.4

[drcmda]

oh no i havent even exposed it. i published it in 7.0.5. also need to add it to drei. if it still clings to the memory please make a small repro as a codesandbox.

[srcnalt]

Thank you so much 🙏 I'll be on it.

[srcnalt]

Amazing, literally just a version bump and it works like a charm! Thank you so much!