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;