ThreeJS 에서 텍스처 변경 및 업데이트 방법 - 노말 맵, 텍스처 맵, displacement 맵

텍스처 변경 및 업데이트를 하기 위해서

Material의 map 또는 normalMap 등에 Texture 을 적용한 뒤 needsUpdate 을 활성화한다.

텍스처를 로드하기 위해서는 THREE 내 TextureLoader 클래스를 사용하면 된다.

let textureLoader = new THREE.TextureLoader(); this.__normalPaper = textureLoader.load("data.jpg");

상기 소스코드는 ./data.jpg 위치의 이미지를 텍스처 로더로부터 로드해 텍스처 객체를 this.__normalPaper 에 담는 코드이다. 이 때, 상기 로드는 우선 텍스처 객체를 할당하고, 데이터가 로드되면 해당 객체에 텍스처 정보를 삽입한다는 것에 유의해야 한다.

따라서 textureLoader 의 load() 함수에 콜백 함수를 넘길 수 있으며, 콜백 종류는 다음과 같다.

load( url, onLoad, onProgress, onError )

첫 번째 경로는 URL, 두 번째는 onLoad 콜백, 세 번째는 onProgress, 네 번째는 onError 콜백이다. Progress는 진행 정도를 나타내는 콜백이고, Error, onLoad 를 통해 실패, 성공 여부를 파악할 수 있다. 성공 콜백함수를 통해 텍스처 로드가 성공되었을 때 해당 맵을 메트리얼에 적용하고 업데이트를 요청할 수 있다.

material.normalMap = this.__normalPaper; material.needsUpdate=true;

material 에 적용 가능한 대표적인 맵 종류는, 일반 텍스처인 map, 법선 텍스처인 normalMap 및 displacement 텍스처인 displacementMap을 적용할 수 있다.

material.map= this.__paperTexture material.normalMap = this.__normalPaperTexture; material.displacementMap = this.__displacePaperTexture;