[three.js] three.js camera perspectiveCamera 내용 알아보기
three.js의 기초 Camera를 설정하는 부분에 대해서 알아 보겠습니다.
fov : field of view , 시야각
3D게임에서 한 화면에서 어느 정도 공간을 보여줄 것인지를 설정하는 값
Fov가 90인 화면은 전방위를 1/4의 영역이 화면에 보이는 것.
평균적으로 인간의 안구는 fov 값은 보통 110도 내외
눈을 굴릴 경우, 좌우 약 220도 , 상하는 90도
즉, fov는 한번에 볼 수 있는 시야 영역
fov 값이 높다면, 같은 화면으로 더 넓은 영역을 볼 수 있지만,
상이 일그러지게 된다.
fov = 20 , 50 , 90
초록색 상자 = 첫번째로 큼, 두번째로 큼, 가장 작다
숫자가 낮을 수록 시야각이 좁아짐으로 초록색 면이 더 크게 보인다.
aspect_ratio
카메라의 가로세율 비율
일반적으로 뷰포트는 요소의 너비를 높이로 나눈 값을 사용하는 것을 권장.
뭉게지거나 찌그러짐 현상을 방지하기 위한 권장.
기본값은 1 , 정사각형 캔버스
aspect_ratio = (9/ 10) , (18 / 10) , (27 / 10)
분자가 커질 수록 세로는 길어지고, 가로는 얇아진다
여기서
window.innerWidth/window.innerHeight의 값은
console.log(window.innerWidth / window.innerHeight)
1.8328416912487708
frustum_near , frustum_far
절두체 : 시야에시는 영역을 표현하는 프로그램의 부하를 줄이기 위해서 컬링을 구해야함.
글로 이해하기 어렵습니다. 참고사이트에 위키피디아의 이미지를 보시면 이해하기 쉬어요!!
원본이미지 주소 및 저작권 : http://www.falloutsoftware.com/tutorials/gl/gl0.htm
참고 사이트 : https://en.wikipedia.org/wiki/Viewing_frustum
결과화면 및 테스트
미나미나미