You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 !
The text was updated successfully, but these errors were encountered:
Este-Crowned
changed the title
Missing Documentation : Preload component cannot be used with useGLTF.preload()
Missing Documentation : Preload component cannot be used together with useGLTF.preload()
Jun 6, 2024
three
version:0.164.1
@react-three/fiber
version:8.16
@react-three/drei
version:9.105
node
version:22.0.0
npm
(oryarn
) version:10.5.1
Problem 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 !
The text was updated successfully, but these errors were encountered: