Three.js 5일차 (Texture/질감)

 

---

1. 텍스쳐 이미지 다운

---

https://3dtextures.me/2022/01/16/stone-path-008/

Stone Path 008

위 사이트에서 다양한 텍스쳐 이미지를 다운받아 적용해볼 수 있다.

 

 

 

이렇게 4가지를 사용할 것이다.

 

 

---

2. 마우스 컨트롤

---

import {orbitControls} from 'three/examples/jsm/controls/OrbitControls';


//카메라 이후에 등장하는 orbit
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.update();

orbitControls로 마우스를 이용한 화면 전환이 가능하다. orbitControls는 three.js의 대표적인 3요소 scene, camera, renderer 뒤에 적용해야 한다.

 

10번 강의에서 제대로 다룰 예정이다.

 

 

 

 

 

---

3. 텍스쳐 추가 

---

//텍스처 추가
const textureLoader = new THREE.TextureLoader();
//텍스처 추가
const textureLoader = new THREE.TextureLoader();
const textureBaseColor = textureLoader.load('../static/img/stone_basecolor.jpg');
const textureNormalMap = textureLoader.load('../static/img/stone_normal.jpg');
const textureHeightMap = textureLoader.load('../static/img/stone_height.jpg');
const textureRoughnessMap = textureLoader.load('../static/img/stone_roughness.jpg');

텍스처는 THREE.TextureLoader를 이용한다. THREE.TextureLoader의 load를 이용해 이미지 파일을 불러온다.

 

 

//매쉬 05
const geometry05 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
const material05 = new THREE.MeshBasicMaterial({
    map:textureBaseColor,
});
const obj05 = new THREE.Mesh(geometry05, material05);
obj05.position.x=-2;
scene.add(obj05);

불러온 텍스쳐 이미지를  Material 속성의 map으로 넣는다.

 

 

 

//매쉬 05
  const geometry05 = new THREE.SphereGeometry(0.3, 32, 16);
  const material05 = new THREE.MeshStandardMaterial({
    map:textureBaseColor,
  });
  const obj05 = new THREE.Mesh(geometry05, material05);
  obj05.position.x=-2;
  scene.add(obj05);

SphereGeometry를 이용하면 원형으로 표현할 수도 있다.

 

 

 

 

 

---

4. normapMap

---

 

 

//매쉬 01
  const geometry01 = new THREE.SphereGeometry(0.3, 32, 16);
  const material01 = new THREE.MeshStandardMaterial({
    map:textureBaseColor,
    normalMap:textureNormalMap,
  });
  const obj01 = new THREE.Mesh(geometry01, material01);
  obj01.position.x=-1;
  scene.add(obj01);

 

매쉬 01에는 05 코드에서 normapMap을 추가했다. 어두운 부분을 다른 이미지로 표현한 것이다.

 

같은 구에서 어두운 부분의 차이가 극명한 것을 알 수 있다.

 

 

 

 

---

5. displacementMap

---

 

매쉬 정점의 위치를 밝고, 어두움에 따라서 조정하는 것이 displacementMap이다.

//매쉬 02
  const geometry02 = new THREE.SphereGeometry(0.3, 32, 16);
  const material02 = new THREE.MeshStandardMaterial({
    map:textureBaseColor,
    normalMap:textureNormalMap,
    displacementMap:textureHeightMap,
  });
  const obj02 = new THREE.Mesh(geometry02, material02);
  scene.add(obj02);

헉! 소리나게 이상해진 모양 :)

 

//매쉬 02
  const geometry02 = new THREE.SphereGeometry(0.3, 32, 16);
  const material02 = new THREE.MeshStandardMaterial({
    map:textureBaseColor,
    normalMap:textureNormalMap,
    displacementMap:textureHeightMap,
    displacementScale:0.05
  });
  const obj02 = new THREE.Mesh(geometry02, material02);
  scene.add(obj02);

그럴 땐 displacementScale을 조정해주면 된다.

 

 

 

---

6. roughnessMap

---

//매쉬 03
  const geometry03 = new THREE.SphereGeometry(0.3, 32, 16);
  const material03 = new THREE.MeshPhysicalMaterial({
    map:textureBaseColor,
    normalMap:textureNormalMap,
    displacementMap:textureHeightMap,
    displacementScale:0.05,
    roughnessMap:textureRoughnessMap
  });
  const obj03 = new THREE.Mesh(geometry03, material03);
  obj03.position.x=1;
  scene.add(obj03);

roughnessMap을 이용해 빛을 표현할 수 있다.

 

 

 

빛이 보이는 모습!

 

//매쉬 03
  const geometry03 = new THREE.SphereGeometry(0.3, 32, 16);
  const material03 = new THREE.MeshPhysicalMaterial({
    map:textureBaseColor,
    normalMap:textureNormalMap,
    displacementMap:textureHeightMap,
    displacementScale:0.05,
    roughnessMap:textureRoughnessMap,
    roughness:0.8
  });
  const obj03 = new THREE.Mesh(geometry03, material03);
  obj03.position.x=1;
  scene.add(obj03);

roughness를 이용해 빛의 세기를 조절할 수 있다.

 

더욱 반짝거리는 모습!