纹理是一种用于为网格表面上色的图像。它可以用于为3D对象添加细节。

纹理通过材质应用于网格。材质定义了纹理是如何应用于网格以及它如何与光线交互。

useTexture

Drei中的useTexture hook用于从文件中加载纹理。它返回一个可以用于材质的Texture对象。

让我们从放置在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>
    </>
  );
};

纹理通过材质的map属性应用于网格。

我们的铺路石纹理应用在立方体上。

正如我们在useGLTF中看到的那样，useTexture在底层使用useLoader和TextureLoader加载纹理。

如果我们想要缩放纹理，我们可以使用纹理的repeat属性：

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;
  // ...
};

wrapS和wrapT属性定义了纹理在网格上的重复方式。默认情况下，纹理被夹在网格的边缘。这里我们使用RepeatWrapping来重复纹理。

我们的纹理在立方体上重复了3次。

如果我们反过来想要拉伸纹理，我们可以减少repeat值：