텍스처는 메쉬 표면의 색상을 나타내기 위해 사용되는 이미지입니다. 3D 객체에 디테일을 추가하는 데 사용될 수 있습니다.

텍스처는 material을 사용하여 메쉬에 적용됩니다. material은 텍스처가 메쉬에 어떻게 적용되고, 빛과 어떻게 상호작용할지를 정의합니다.

useTexture

Drei의 useTexture hook은 파일에서 텍스처를 로드하는 데 사용됩니다. 이는 material에서 사용할 수 있는 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>
    </>
  );
};

material의 map 속성을 사용하여 메쉬에 텍스처가 적용됩니다.

포장 돌 텍스처가 큐브에 적용되었습니다.

useGLTF와 마찬가지로, useTexture는 내부적으로 TextureLoader와 함께 useLoader를 사용하여 텍스처를 로드합니다.

텍스처 크기를 조정하려면 텍스처의 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 값을 줄일 수 있습니다: