Frontend/Three.js

재질, 텍스쳐 변환

wam 2024. 10. 22. 22:34

 

THREE.RepeatWrapping

  • 텍스처를 물체에 적용할 때 사용되는 래핑 모드 중 하나이다.
  • 텍스처가 물체의 UV 좌표를 벗어날 경우 텍스처가 반복되어 적용되게 한다.
  • wrapS는 수평, wrapT 수직 방향으로 반복되도록 설정하는 것이다.
  • 텍스쳐의 offset, repeat 등 변환을 줄 때 THREE.RepeatWrapping 적용하기

 

 

 

텍스쳐 기준 가운데로 잡기

...

/* 텍스쳐 변환 */
//  텍스처가 물체의 UV 좌표를 벗어날 경우 텍스처가 반복되어 적용되게 한다.
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

// 위치 이동
texture.offset.x = 0.3;
texture.offset.y = 0.3;


// 반복
texture.repeat.x = 2;
texture.repeat.y = 2;

// 회전
texture.rotation = Math.PI * 0.25;
texture.rotation = THREE.MathUtils.degToRad(60);

// 기준을 가운데로 잡기
texture.center.x = 0.5;
texture.center.y = 0.5;