Texture(텍스처)란 객체의 색상과 질감을 표현하는 Material(머티리얼)에서 사용되는 이미지나 비디오를 말합니다.
Texture Mapping(텍스처 매핑)이란 객체의 표면에 색을 칠하거나 이미지를 입히는 것입니다.
객체에 Texture Mapping(텍스처 매핑)하기 위해서는 Texture(텍스처)를 로드해야 합니다.
three.js에서는 TextureLoader(텍스처로더)로 Texture(텍스처)를 로드합니다.
TextureLoader(텍스처로더)는 이미지 (PNG, JPG, GIF, DDS) 또는 비디오 (MP4, OGG/OGV)를 로드합니다.
TextureLoader(manager : LoadingManager)- manager(매니저) : 로딩매니저입니다. 기본값 THREE.DefaultLoadingManage
그럼 두 번째 육면체 객체에 Texture Mapping(텍스처 매핑)을 해보겠습니다.
육면체 객체에 Texture(텍스처 매핑)할 나무 바닥 이미지를 다운로드합니다.
저는 나무 바닥 이미지를 Freepik 사이트에서 무료로 다운로드하였습니다.
다운로드한 나무 바닥 이미지의 크기가 크기 때문에 이미지 크기를 넓이 150px, 높이 100px으로 조정하였습니다.
1. 프로젝트에 resources \ textures 폴더를 생성하고 다운로드한 나무 바닥 이미지 파일(wood1.jpg)을 추가합니다.
2. resources \ textures 폴더에 있는 나무 바닥 이미지 파일(wood1.jpg)을 TextureLoader(텍스처로더)로 로드합니다.
// 텍스처 매핑할 텍스처를 로드
const box2Texture = new THREE.TextureLoader().load('resources/textures/wood1.jpg');
3. 로드한 Texture(텍스처)를 Material(머티리얼)의 map 속성에 설정합니다.
// 육면체에 사용할 색상과 질감의 데이터를 생성
const box2Material = new THREE.MeshStandardMaterial({map:box2Texture});기존에 있는 color 속성은 삭제합니다. 그 이유는 Texture(텍스처)의 map color가 color 속성 값과 결합되어 변경되기 때문입니다. 글 끝부분에서 테스트로 color 속성과 같이 사용해 보도록 하겠습니다.
4. 두 번째 육면체 객체가 보이도록 Camera(카메라)의 위치를 변경합니다.
// 카메라 위치 변경
camera.position.set(0, 2, 8);
그러면 두 번째 육면체 객체의 모든 면이 나무 바닥 이미지로 변경됩니다.
마우스로 이동해서 보시면 입체적으로 확인할 수 있습니다. 나무 바닥 이미지가 육면체 객체에 잘 어울립니다.
이번에는 주사위 이미지를 만들어서 두 번째 육면체 객체에 Texture Mapping(텍스처 매핑)을 해보겠습니다.
주사위 이미지를 간단하게 PPT로 만들었습니다.
틀은 직사각형으로 가로/세로는 3cm, 도형 채우기는 흰색, 도형 윤곽선은 검은색입니다.
점은 원형으로 가로/가로는 0.6cm, 도형 채우기와 도형 윤곽선은 검은색입니다.
직사각형안의 점선은 중앙을 맞추기 위해서 사용했습니다. 저장하기 전에 점선은 삭제합니다.
각각을 PNG 파일로 저장합니다.
그리고 프로젝트에 resources \ textures 폴더에 주사위 이미지 파일을 추가합니다.
여러 Texture(텍스처)들을 여러 번 로드하기 위해서 TextureLoader(텍스처로더)를 분리하여 생성합니다.
// 텍스처 로드 생성
const box2TextureLoader = new THREE.TextureLoader();
육면체 면마다 텍스처가 다른 Material(머티리얼)을 설정해줘야 합니다.
그래서 6개의 Material(머티리얼)을 생성해서 배열로 전달해야 합니다.
6개의 Material(머티리얼)이 육면체에 매핑되는 순서는 오른쪽(1), 왼쪽(2), 위(3), 아래(4), 앞(5), 뒤(6)입니다. (전개도 모양은 다를 수 있습니다.)
그러나 대부분의 주사위는 1을 기준(1이 위에 있을 경우)으로 다음과 같이 되어 있습니다.
그래서 6개의 Material(머티리얼)로 배열을 만들 때 주사위 위치에 맞게 텍스처(주사위 이미지)를 로드해야 합니다.
// 머티리얼 배열
const box2Materials = [
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png")}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2.png")}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1.png")}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6.png")}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3.png")}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4.png")})
];
6개의 면이 다른 텍스처(주사위 이미지)가 되기 위해서 Material(머티리얼) 배열로 변경합니다.
// 육면체와 색상과 질감의 데이터 배열을 결합하여 육면체 객체 생성
const box2 = new THREE.Mesh(box2Geometry, box2Materials);
그러면 두 번째 육면체 객체의 모든 면이 주사위 이미지로 변경됩니다.
마우스로 이동해서 보시면 입체적으로 확인할 수 있습니다.
위에서 말한 것처럼 Material(머티리얼)의 map 속성과 color 속성이 같이 사용하게 되면 Texture(텍스처)의 map color가 color 속성 값과 결합되어 색이 변경됩니다. map color가 흰색인 경우 color 속성 값이 됩니다.
Material(머티리얼)에 기존 color 속성을 추가합니다.
// 머티리얼 배열
const box2Materials = [
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png"), color:box2Color}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2.png"), color:box2Color}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1.png"), color:box2Color}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6.png"), color:box2Color}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3.png"), color:box2Color}),
new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4.png"), color:box2Color})
];
그러면 새로고침 할 때마다 주사위의 색상이 변경되는 것을 확인할 수 있습니다.
그 이유는 주사위 이미지가 흰색이기 때문에 변경되는 색상으로 변경됩니다.
흰색이 아닌 다른 색상일 경우 색이 변경되어 보일 겁니다.