Scaling textures on a gltfjsx import model

Question

I'm completely new to this, and I don't know how to scale my texture to make it look smaller. it is a seamless texture. The three methods that come from materials do work well but the ones that have to do with texture don't do anything, surely it will be silly, but I'm starting to program and I don't know how to do it.

<mesh geometry={nodes.BON_GRAVA.geometry} 
      material={materials.BON_GRAVA} 
      material-map={useTexture("Gravel_001_BaseColor.jpg")}(works)
      material-metalness={0.0} (works)
      material-roughness={1.0} (works)
      material-roughnessMap={useTexture("Gravel_001_Roughness.jpg")} (works)
      material-normalMap={useTexture("Gravel_001_Normal.jpg")} (works)
      material-aoMap={useTexture("Gravel_001_AmbientOcclusion.jpg")} (works)

This is me trying to do something, sorry

I've been trying .repeat, .offset, .wrapS but I don't know how the syntax for THREE methods works since it's a file gltfjsx + react

Answer 1

Call the useTexture hook at the top, then you can modify the Texture's (when the component mounts) with a useEffect hook: (be sure to set the needsUpdate flag to true on the Texture after any changes)

export function Component() {

   const color = useTexture("Gravel_001_BaseColor.jpg");
   const roughness = useTexture("Gravel_001_Roughness.jpg");
   const normal = useTexture("Gravel_001_Normal.jpg");
   const ao = useTexture("Gravel_001_AmbientOcclusion.jpg");

   useEffect(() => {
      color.repeat = new Vector2(1, 1);
      color.wrapS = RepeatWrapping;
      color.wrapT = RepeatWrapping;
      color.needsUpdate = true; // don't forget this!
   }, [color])

   return (
      <mesh
         geometry={nodes.BON_GRAVA.geometry} 
         material={materials.BON_GRAVA} 
         material-map={color}
         material-metalness={0.0}
         material-roughness={1.0}
         material-roughnessMap={roughness}
         material-normalMap={normal}
         material-aoMap={ao}
      />
   )

}