기본 개념 Scene, Camera, Renderer

만사불여튼튼이라고 했다. 기초지만 정말 중요하다.

이거 모르면  three.js 를 이용해서 아무것도 못하니까 잘 알아두자.

---

Scene : 물체, 카메라 및 조명을 배치할 수 있는 3D 공간. 크기를 지정 가능. 그냥 화면이다.

Camera (이미지 출처 : https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene)

Camera : 실생활의 카메라와 같음. 카메라의 위치와 카메라가 향하는 방향에 따라 화면에 렌더링되는 부분이 결정됨. 보는 위치 및 시야각

카메라를 설정할 때 수직 시야(fov), 종횡비, 근거리 및 원거리를 전달해야 함. 이 네 개의 값은 카메라로 캡처할 수 있는 3D 공간을 나타냄. 즉, 보고자 하는 영역(범위)

• fov : 수직 시야
• aspect : 세로를 기준으로 가로 시야를 만드는데 사용하는 가로 세로 비율
• near : 카메라의 시점이 시작되는 위치
• far : 카메라의 시점이 끝나는 위치

Renderer: Canvas에 실제로 설정한 데이터를 그려주는 친구. 그림판

 

아래는 공식 문서에 있는 예제 코드이다. (아주 살짝 수정했...었다. 그런데 codepen 써서 의미없다. )

result를 누르면 결과값이 사라지고 코드란이 넓어져서 편하게 볼 수 있다. 

 

See the Pen RwbpGWa by iamdap91 (@iamdap91) on CodePen.