Three.js 4일차 (Material)

 

---

1. 빛을 추가하는 법

---

 

Material의 요소 중 빛을 추가하는 법을 배웠다. light은 재질에 따른 빛 표현이 가능하다.

 

 

//빛
const pointLight = new THREE.PointLight(0xffffff,1);//색깔, 세기
pointLight.position.set(0, 2, 12); //x, y, z
scene.add(pointLight);

PointLight를 이용해 색깔과 세기를 표현할 수 있다. 또한 빛의 위치를 position.set을 이용해 x, y, z 위치 설정이 가능하다.

빛의 셋팅이 다 되었다면 또 scene에 추가해주면 된다.

 

셋팅이 되었을 때 빛이 표현이 안된다면 쓰고 있는 Material은 빛에 영향을 받지 않는 녀석인 것이다.

//매쉬 01
  const geometry01 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
  const material01 = new THREE.MeshBasicMaterial({
    color:0xFF7F00
  });
  const obj01 = new THREE.Mesh(geometry01, material01);
  obj01.position.x=-1;
  scene.add(obj01);

대표적으로 MeshBasicMaterial은 빛의 영향을 받지 않는다. Basic이 아닌 Standard를 쓰면 빛의 영향을 줄 수 있다.

 

 

[빛의 영향]

import * as THREE from 'three'

import {
  WEBGL
} from './webgl'

if (WEBGL.isWebGLAvailable()) {

  
  // 장면
  const scene = new THREE.Scene();


  // 카메라
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z=2;


  // 렌더러
  const renderer = new THREE.WebGLRenderer({
    alpha:true,
    antialias:true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement); //1) document.body에다가 바로 적용하는 방법

  //빛
  const pointLight = new THREE.PointLight(0xffffff,1);//색깔, 세기
  pointLight.position.set(0, 2, 12); //x, y, z
  scene.add(pointLight);


  //매쉬 01
  const geometry01 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
  const material01 = new THREE.MeshStandardMaterial({
    color:0xFF7F00
  });
  const obj01 = new THREE.Mesh(geometry01, material01);
  obj01.position.x=-1;
  scene.add(obj01);

  //매쉬 02
  const geometry02 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
  const material02 = new THREE.MeshBasicMaterial({
    color:0xFF7F00
  });
  const obj02 = new THREE.Mesh(geometry02, material02);
  scene.add(obj02);

  //매쉬 03
  const geometry03 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
  const material03 = new THREE.MeshBasicMaterial({
    color:0xFF7F00
  });
  const obj03 = new THREE.Mesh(geometry03, material03);
  obj03.position.x=1;
  scene.add(obj03);

  //매쉬 04
  const geometry04 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
  const material04 = new THREE.MeshBasicMaterial({
    color:0xFF7F00
  });
  const obj04 = new THREE.Mesh(geometry04, material04);
  obj04.position.x=2;
  scene.add(obj04);


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

  


  //애니메이션 하려면 다음과 같이 표현해줘야 함
  function render(time){
    time *= 0.001;

    obj01.rotation.x=time;
    obj01.rotation.y=time;

    obj02.rotation.x=time;
    obj02.rotation.y=time;

    obj03.rotation.x=time;
    obj03.rotation.y=time;

    obj04.rotation.x=time;
    obj04.rotation.y=time;

    obj05.rotation.x=time;
    obj05.rotation.y=time;

    renderer.render(scene, camera);

    requestAnimationFrame(render);

  }

  requestAnimationFrame(render);

  //반응형 처리
  function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

  window.addEventListener('resize', onWindowResize);

} else {
  var warning = WEBGL.getWebGLErrorMessage();
  document.body.appendChild(warning);
}

 

이처럼 매쉬01에만 MeshStandardMaterial을 넣어주었다.

 

순서대로 매쉬 05 > 01 > 02 > 03 > 04이다. 01이 두드러지게 빛을 받고 있는 모습을 볼 수 있다.

 

 

---

2. 메탈요소 추가

---

MeshStandardMaterial는 메탈 요소도 추가할 수 있다. metalness가 그것이다.

//매쉬 01
const geometry01 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
const material01 = new THREE.MeshStandardMaterial({
    color:0xFF7F00,
    metalness:1
});
const obj01 = new THREE.Mesh(geometry01, material01);
obj01.position.x=-1;
scene.add(obj01);

MeshStandardMaterial에 속성으로 metalness를 0.0~1.0 사이로 추가해주면 된다.

돌이나 나무는 0.0에 가까운 값을 메탈은 1에 가까운 값을 주면 된다.

 

1로 준 모습

 

 

 

---

3. 투명도 적용

---

 

//매쉬 01
  const geometry01 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
  const material01 = new THREE.MeshStandardMaterial({
    color:0xFF7F00,
    metalness:1,
    transparent:true,
    opacity:0.5
  });
  const obj01 = new THREE.Mesh(geometry01, material01);
  obj01.position.x=-1;
  scene.add(obj01);

MeshStandardMaterial에 속성으로 transparent:true, opacity: 0~1사이로 주면 된다.

 

 

 

 

 

---

4. 거칠기 표현

---

//매쉬 01
const geometry01 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
const material01 = new THREE.MeshStandardMaterial({
    color:0xFF7F00,
    metalness:1,
    transparent:true,
    opacity:0.5,
    roughness:0.5
});
const obj01 = new THREE.Mesh(geometry01, material01);
obj01.position.x=-1;
scene.add(obj01);

roughness를 0~1사이로 추가하면 거칠기가 추가된다.

 

좀 더 금속같아졌다. roughness와 메탈 속성( metalness )을 같이 주면 좀 더 메탈스러운 재질 표현이 가능하다.

 

 

 

---

5. 와이어프레임 표현

---

 

//매쉬 01
  const geometry01 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
  const material01 = new THREE.MeshStandardMaterial({
    color:0xFF7F00,
    metalness:1,
    transparent:true,
    opacity:0.5,
    roughness:0.5,
    wireframe:true
  });
  const obj01 = new THREE.Mesh(geometry01, material01);
  obj01.position.x=-1;
  scene.add(obj01);

wireframe 속성을 추가해주면 된다. 안에 속성 말고도 material01.wireframe = true;로 표현해줄 수도 있다.

 

 

메탈 속성과 같이 넣어주면 와이어프레임도 금속 같은 느낌이 난다.

 

 

---

6. MeshPhysicalMaterial

---

MeshStandardMaterial에서 발전된 Material이다. clearcoat 표현이 가능하다.

clearcoat란? 차창의 유리 표현과 같다고 할 수 있다.

 

 

//매쉬 03
  const geometry03 = new THREE.TorusGeometry(0.3, 0.15, 16, 40);
  const material03 = new THREE.MeshPhysicalMaterial({
    color:0xFF7F00,
    clearcoat:1
  });
  const obj03 = new THREE.Mesh(geometry03, material03);
  obj03.position.x=1;
  scene.add(obj03);

clearcoat를 0.0~1.0 사이로 줄 수 있다.

 

 

 

 

clearcoatRoughness로 거칠기도 표현할 수 있다.