Three.js (5) Texture

Texture?

Texture는 일반적으로 포토샵 같은 이미지 편집 프로그램으로 만든 ‘이미지’이다.

Geometry가 뼈대, Material이 살이라면 Texture는 일종의 옷이라고 볼 수 있다. 물론 이것도 정확한 비유는 아닌 것이 결국 물체가 보여지는 것은 Texture뿐 아니라 Material의 영향도 받기 때문인데, Texture는 오브젝트의 표면을, Material은 빛과의 상호작용 표현을 담당한다고 이해하면 될 것 같다.

정리하자면, Texture는 특정 이미지를 3D오브젝트에 입히는 것이라고 할 수 있다.

가. TextureLoader 불러오기

const loader = new THREE.TextureLoader();

나. Texture 입히기(기본)

Texture는 Material에 적용한다.

const material = new THREE.MeshBasicMaterial({
  color: 0xFF8844,
  map: loader.load("url"),
});

위와 같이 직접 텍스쳐를 입혀보았다. 아래는 참조한 예제링크이다.

예제)
https://threejs.org/manual/examples/textured-cube.html

💡 주의사항 : loader.load 안쪽 url은, http://~ 머시기를 쓰지 않을 경우 현재 경로(http://localhost:8080/ 이런거...)가 기본으로 지정된다. ~~(이것 때문에 1시간을.... 아놔)~~

• 기본적으로 WebGL에서 이미지는 로컬에서 불러올 수 없다고 한다.(보안상)

💡 WebGL은 보안 때문에 기본적으로 로컬 파일을 직접 가져다 쓸 수 없습니다. 말인즉 실제 프로젝트를 배포/테스트하려면 웹 서버를 써야한다는 이야기죠. - 공식문서

다. 여러 Texture 입히기

const materials = [
  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-1.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-2.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-3.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-4.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-5.jpg')}),
  new THREE.MeshBasicMaterial({map: loader.load('resources/images/flower-6.jpg')}),
];

const cube = new THREE.Mesh(geometry, materials);

예제)
https://threejs.org/manual/examples/textured-cube-6-textures.html

• 단, 모든 geometry에 여러 Texture가 입혀지는 것은 아니며, Box나 Cone같은 것(각진 친구들)에 적용 가능하다.

라. 비동기처리

const loader = new THREE.TextureLoader();
loader.load('resources/images/wall.jpg', (texture) => {
  const material = new THREE.MeshBasicMaterial({
    map: texture,
  });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  cubes.push(cube);  // 회전 애니메이션을 위해 배열에 추가
});

마. 여러설정들

THREE.ClampToEdgeWrapping : Texture의 가장자리 픽셀을 계속해서 반복

THREE.RepeatWrapping : Texture 자체를 반복한다

THREE.MirroredRepeatWrapping : Texture 자체를 반복하되, 매번 뒤집음

//반복설정하기
const timesToRepeatHorizontally = 4;
const timesToRepeatVertically = 2;
someTexture.repeat.set(timesToRepeatHorizontally, timesToRepeatVertically);

//위치설정하기
const xOffset = .5;   // 텍스처 너비의 반만큼 이동
const yOffset = .25;  // 텍스처 높이의 1/4만큼 이동
someTexture.offset.set(xOffset, yOffset);

//rotation속성지정
someTexture.center.set(.5, .5);
someTexture.rotation = THREE.MathUtils.degToRad(45);

• 단. rotation속성은 radian단위로 설정