Dynamically use useGLTF.preload()

[senorbeast]

Sorry, if its a silly question but.

How can i dynamically use useGLTF.preload() ?

const  DynaModel({mtype, ...props})  => {

// Inside Component dynamically change glb file.
const { nodes, materials } = useGLTF(`/${mtype}.glb`) as GLTFResult

const meshes: THREE.Mesh[] = Object.values(nodes).filter(
    (value) => value.type === 'Mesh'
  )

return( 
    <>
      {meshes.map((mesh) => (
        <mesh
          key={mesh.name}
          geometry={mesh.geometry}
          material={materials[mesh.material.name]} // I plan to load materials in separate glb files, so I am refering like this.
        ></mesh>
      ))}
    </>
  )
}

// Outside Component How to dynamically use preload here?
useGTLF.preload( )

Since mtype is passed through props, how do i access it outside the component ?
or Should i bring it inside the react component. What happens to caching then?

Just for some Context:
I am also planning to use multiple instance of DynaModel Component, while keeping the control over each instance. Any tips for this would be a plus. (I have tried it with keeping the materials as a separate element to keep control on individual instance)

[drcmda]

You can call it whenever you want, it does no harm. Caching will be fine, first usegltf or preload that executes will load and parse, consecutive calls will suspend

[senorbeast]

Thanks for this, and the great work you are doing

[dghez]

@senorbeast, have you solved? Do you mind show how? Currently doing something similar and would be awesome to see the implementation and trying to figure out the best way to do that 👀