three.js texture 변환하기

texture를 입히고 나서 변환하는 방법을 알아보자.

const loadingManager = new THREE.LoadingManager();
loadingManager.onStart = () => {
    console.log('로드 시작');
};
loadingManager.onProgress = img => {
    console.log(img + ' 로드');
};
loadingManager.onLoad = () => {
    console.log('로드 완료');
};
loadingManager.onError = () => {
    console.log('에러');
};

const textureLoader = new THREE.TextureLoader(loadingManager);
const texture = textureLoader.load(
    'textures/skull/Ground Skull_basecolor.jpg');

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객체에는 다양한 속성이 있다. offset을 통해 중심에서 일정 거리 떨어뜨려 입히거나, repeat로 반복적으로 텍스트를 입힐 수 있다. 이때 wrapS(x axis), wrapT(y axis)를 통해 텍스처를 계속해서 입혀주어야한다.

 

texture.rotation = Math.PI * 0.25;
texture.rotation = THREE.MathUtils.degToRad(20);
texture.center.x = 0.5;
texture.center.y = 0.5;

rotation을 이용해서 텍스처를 회전시킬 수 도 있다. 

이때 회전하는 기준이 어딘지를 center를 이용해서 지정할 수 있다.