How to get loading progress with useLoader?

[anuragsr]

This is more of a question than a bug. In three.js, we use the THREE.LoadingManager.onProgress method to get the current loading status for models / textures.

From what I've observed with useLoader and Suspense, it essentially turns this process synchronous, allowing use of the model right after it is loaded. I wanted to know, if there is a way to also get the progress of the loading, for eg. to display a realistic progress loader.

Thanks

[joshuaellis]

Have you looked at @react-three/drei -> useProgress hook? It's probably a decent reference for you.

[drcmda]

you can either get it directly from the loader, this is the progress from a single loader only

export function useLoader<T, U extends string | string[]>(
  Proto: new () => LoaderResult<T>,
  input: U,
  extensions?: Extensions,
  onProgress?: (event: ProgressEvent<EventTarget>) => void
)

useLoader(TextureLoader, url, undefined, console.log)

you can get it from the THREE.DefaultLoadingManager, this accounts for all loaded assets

or, you use useProgress or <Loader /> from drei like @joshuaellis said.

small example of the loader component: https://codesandbox.io/s/glas-transmission-fresnel-enx1u

[goldenjayr]

Hi this is probably old but I am using v4 of react-three-fiber and upgrading is not an option for me since it is a legacy code a lot of things breaks.. and using v1 of drei and there is no useProgress and Loader at this version of drei. How do I do it using that. Thank you @drcmda

[drcmda]

you would use plain three.defaultloadingmanager just like you would in a vanilla app