[3] Three.js - Scene, Light Sources

이전 시작 단계에서 간단한 튜토리얼을 통해 Three.js 를 어떻게 사용하는지 알아보는데요 

 

이번 단계에서는 Three.js 의 Scene을 구성하는데 사용되는 Object와 역할

three.Scene Object의 역할

geometric과 mesh와의 관계

orthographic camera와 perspective camera의 차이 를 알아보겠습니다. 

 

Scene api

화면에 무언가를 보여주려면 다음 3가지 요소가 필요합니다. 

 

- Camera -> 화면에 어떤 요소가 렌더링되는지를 결정

- Lights -> 물체가 어떻게 보이고, 그림자를 어떻게 생성하는지를 결정

- Objects -> Camera에 비춰지는 물체들

 

Scene 객체는 이런 서로 다른 요소들을 담는 역할을 합니다. 

 

Scene에 추가된 Object를 관리하는 메소드들은 많은데, 이전 예시에서 Scene에 Object를 추가하는 scene.add 메소드도 이에 포함됩니다. 

대표적으로 다음이 있습니다. 

 

Scene.add

Scene.remove

Scene.children

Scene.getObjectBy... 

 

이건 뭐 대단한 지식은 아니고, TS를 사용하면 제공되는 메소드를 쉽게 참조하여 확인할 수 있습니다. 

 

이런식으로..

타입으로 제공되는 api를 적극 활용하고, 공식문서를 통해 학습하는 것이 좋은 방법일 수 있습니다. 

 

Scene.traverse 는 함수를 입력받아 모든 Child element에 적용합니다. 

Scene.fog를 통해 안개 효과를 추가할 수 있습니다. 

Scene.overrideMaterial 을 이용하여 각 Child Object에 적용된 Material을 Override할 수 있습니다. 

 

  scene.overrideMaterial = new three.MeshLambertMaterial({ color: 0xffffff });
  scene.fog = new three.Fog(0xffffff, 0.015, 100);

이전 예시에 overrideMaterial 추가

Geometries and meshes

geometry는 3d space의 point의 집합을 의미하며, 이런 점들을 연결하는 삼각형의 면(mesh)들을 함께 의미합니다. 

cube 의 경우 cube는 8개의 점으로 이루어져있고 한 면은 삼각형의 면 2개로 구성됩니다. 

Three.js를 이용하면 일일이 vertice와 face를 정의할 필요 없이 해당 object를 정의하는 key feature만 정의하면 됩니다.

예를 들어 cube는 width height depth 겠지요. 

 

임의로 vector와 face를 정의한 후 이를 이용해서 Geometry를 구성할 수 있습니다. 

임의의 Geometry를 구성한 후 computeFaceNormals 를 호출하여 각 face의 normal vector를 계산하여야

광원에 대해 비치는 빛을 구성할 수 있습니다. 

 

translation

rotation

이런것들은 필요할때마다 따로 적용해보면서 공부하면 됩니다.

 

Orthographic camera vs Perspective camera

Perspective Camera는 natural view 라고 생각하면 되고, 카메라의 위치에 대해 멀리 있을 수록 작게 렌더링된다.

Orthographic Camera는 동일한 물체는 항상 동일한 크기로 보여진다. 카에라와 물체의 거리와는 상관 없이 말이다. 

심시티나 롤러코스터타이쿤 이런 게임에 Orthographic Camera가 적용된다. 

 

Perspective Camera엔 다음 속성을 적용할 수 있다.

 

fov (field of view) : 카메라의 위치에서 볼 수있는 장면의 각도 (시야각) 을 의미한다. 기본값은 50이고, 일반적으로 60~ 90도를 채택한다. 게임에서 해상도 선택시 시야가 달라지는 것은 곧 fov가 달라진다고 볼 수 있다.  

aspect - horizontal 과 vertical size의 비율을 정한다. 일반적으로 (window.innerWidth / window.innerHeight) 를 사용한다. 

near - 얼마나 가까이 있는 물체까지 렌더링해야 하는지를 정한다

far - 얼마나 멀리 있는 물체까지 렌더링해야 하는지를 결정한다. 

zoom - 말그대로 zoom이다. 

 

Orthographic Camera 는 aspect ration나 fov에 관한 것이 아니라 모든 object가 동일한 크기로 렌더링되기 때문에

렌더링되야 하는 큐브 영역만 지정해주면 된다. 

 

left, right, top, bottom 을 통해 렌더링되어야 하는 박스 영역을 지정해준다. 

near과 far를 통해 박스의 width 를 지정해준다. 

zoom은 크기를 확대 혹은 축소한다. 

 

Light Sources

WebGL 자체에 lighting을 위한 Support는 없고, 직접 구현해야 한다. (근데 엄청 힘듬.. 참고)

 

Lights의 종류

- AmbientLight : 기본적인 빛, global하게 빛이 적용됨. 방향이란 개념이 없음.

- PointLight : Single Point로부터 발산되는 빛 (Shadow를 형성할 수 없음)

- SpotLight : 스포트라이트 같이 원뿔형 불빛이 나타남

- DirectionalLight : 평행하는 빛이 비추어진다 (멀리서 오는 태양빛처럼)

- HemisphereLight : 반구 형태로 빛을 전파함

- AreaLight : single point 대신 사용되어 

- Lensflare : 빛은 아니지만 Light에 Lensflare 효과를 지정할 수 있다.