[R3F] Preload not working

Questions
1

Hello,

I have a puzzling problem that I’ve tried to fix for a long time now, as a final option I have decided to ask here.

I’m using react-three-fiber and loading a model like so:

  const { nodes, materials, scene, animations } = useGLTF(
    "/animatedAvatarNew.glb"
  ) as GLTFResult;

and I am also preloading it using:

useGLTF.preload("/animatedAvatarNew.glb");

However when the model enters the frustum of my camera it causes horrible jank. I have tried using Preload from Drei like so:

<Preload all />

Drei documentation says this will cause models to preload even if they are not in the frustum. However this is not fixing my problem. Nothing seems to work. Any ideas?

If you would like to check the repo it’s as follows: https://github.com/IdrisIsra/threelayout

Thank you!

2

useGLTF.preload preloads it, as in it will execute the fetch request and then cache the result, this is outside threejs.

<Preload all> will film the scene with a cubecamera (near 0.01, far 100000), to force three to upload everything to the gpu. this happens only once, so if you load models afterwards they won’t be included.

it’s relatively straight forward and if this doesn’t work it must have a reason. would you post a codesandbox so i can have a look.

3

Hello, here is a link to the codesandbox.

You can either look down using OrbitControls, or scroll down to the end of the page to have the model enter the frustum and cause the jank.

4

@IdrisIsra
did you find any solution for this?