Devcrow

05. Materials - Basic 본문

3D Graphics/Three.js

05. Materials - Basic

yjForest 2016. 9. 5. 13:35

물체의 표면을 결정하는 요소는 Material 입니다.


여기서 물체란 Mesh를 말하며, 이 Mesh는 Geometry와 Material로 생성됩니다. 이 때, Geometry는 오브젝트의 모양을 결정하며, Material은 그 물체가 어떤 외피(표면)을 가질지를 결정합니다.

Three.js는 여러가지 다양한 기본 Material을 제공하며, 본 샘플에서는 그 기본 Material을 갖는 Cube들을 그리고 있습니다.


각 Material들은 아래와 같은 특성을 갖습니다.

  1. Basic Material : 간단한 Shading을 지원하는 가장 기본적인 Material 입니다.
  2. Normal Materal : RGB 색상에 의해 표현되는 제한된 Material 입니다. Wireframe 표현이나 Morphing등의 제한된 기능만 사용 가능합니다.
  3. Standard Material : 기본적으로는 Phong Material과 유사하나, 조금 더 금속재질과 유사한 표현이 가능한 몇가지 속성을 더 가지고 있습니다.
  4. Lambert Material : 조명에 반짝이지 않는 무광재질의 Material 입니다.
  5. Phong Material : 조명에 의해 반짝이는 금속재질의 Material 입니다.

위에서는 가장 기본적인 설명만 드렸으나, 실제 Three.js의 공식 홈페이지를 통해 Material별 다양한 속성을 확인해 보시기 바랍니다.

이들 중 Basic과 Normal은 다른 Material과 약간 다른 성향을 보이는데, 가장 큰 차이는 이 둘은 빛(조명)의 영향을 받지 않는다는 점입니다.

샘플에 ambient light와 spot light 두 개의 조명이 추가되어 있습니다만, 이 두개의 조명을 주석처리 해보면 다른 3개의 Material과는 달리 Basic과 Normal은 조명이 없음에도 불구하고 눈으로 볼 수 있음을 알 수 있습니다. (원래 조명이 없다면 Scene 안의 모든것들은 검정으로 표현되여 구분할 수 없습니다)

아래 샘플 화면을 마우스로 움직여서 각 Material들이 빛의 각도에 따라 어떻게 표현되는지 확인해 보시기 바랍니다.





'3D Graphics > Three.js' 카테고리의 다른 글

07. Geometries  (0) 2016.10.17
06. Colors  (0) 2016.09.07
04. Screen Resize  (0) 2016.09.03
03. Orbit Control  (0) 2016.09.02
02. Simple Animation & GUI  (0) 2016.09.02
Comments