While working on a 3D portfolio project with GLTF animated models showing up 1 by 1 as the camera moves, I had trouble setting up shader precompilation with the drei Preload component. After searching online for a solution and by trial and error, it turned out that the Preload component somehow conflicts with useGLTF.preload function, with as a result the GLTF shaders not being precompiled.
Steps to reproduce:
Create a new React Three Fiber project with Drei.
Create a canvas component, a model component which uses useGLTF hook to load your model. Use the useGLTF.preload function with the path of your model, at the end of the component (after the function declaration).
Back in the canvas, add your model component wrapped in a Suspense component, followed by a Preload component
Set the camera so the model ins't visible in the frustrum when the scene gets loaded. You can use orbit controls to make things easier.
The model's shader shouldn't get preloaded properly, resulting in a significant lag during synchronous compilation.
Suggested solution:
In the documentation, warn users not to use both Preload and useGLTF.preload() at the same time !
threeversion:0.164.1@react-three/fiberversion:8.16@react-three/dreiversion:9.105nodeversion:22.0.0npm(oryarn) version:10.5.1Problem description:
While working on a 3D portfolio project with GLTF animated models showing up 1 by 1 as the camera moves, I had trouble setting up shader precompilation with the drei Preload component. After searching online for a solution and by trial and error, it turned out that the Preload component somehow conflicts with useGLTF.preload function, with as a result the GLTF shaders not being precompiled.
Steps to reproduce:
Create a new React Three Fiber project with Drei. Create a canvas component, a model component which uses useGLTF hook to load your model. Use the useGLTF.preload function with the path of your model, at the end of the component (after the function declaration). Back in the canvas, add your model component wrapped in a Suspense component, followed by a Preload component Set the camera so the model ins't visible in the frustrum when the scene gets loaded. You can use orbit controls to make things easier.
The model's shader shouldn't get preloaded properly, resulting in a significant lag during synchronous compilation.
Suggested solution:
In the documentation, warn users not to use both Preload and useGLTF.preload() at the same time !