Una textura es una imagen que se usa para colorear la superficie de un mesh. Se puede usar para agregar detalles a un objeto 3D.

Una textura se aplica a un mesh usando un material. El material define cómo se aplica la textura al mesh y cómo interactúa con la luz.

useTexture

El hook useTexture de Drei se utiliza para cargar una textura desde un archivo. Devuelve un objeto Texture que se puede usar en un material.

Vamos a cargar el archivo de textura desde el pack de inicio ubicado en public/textures/:

Copy
import { useTexture } from "@react-three/drei";

export const Experience = () => {
  const texture = useTexture("textures/PavingStones130_1K_Color.jpg");

  return (
    <>
      <mesh>
        <boxGeometry />
        <meshStandardMaterial map={texture} />
      </mesh>
    </>
  );
};

La textura se aplica al mesh usando la propiedad map del material.

Nuestra textura de adoquines se aplica al cubo.

Como hemos visto con useGLTF, useTexture utiliza internamente useLoader con TextureLoader para cargar la textura.

Si queremos escalar la textura, podemos usar la propiedad repeat de la textura:

Copy
import { useTexture } from "@react-three/drei";
import * as THREE from "three";
export const Experience = () => {
  const texture = useTexture("textures/PavingStones130_1K_Color.jpg");

  texture.repeat.set(3, 3);
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  // ...
};

Las propiedades wrapS y wrapT definen cómo se repite la textura en el mesh. Por defecto, la textura se clampa al borde del mesh. Aquí usamos RepeatWrapping para repetir la textura.

Nuestra textura se repite 3 veces en el cubo.

Si por el contrario queremos estirar la textura, podemos disminuir el valor de repeat: