'threejs 기초'에 해당되는 글 1건

[three.js] three.js camera perspectiveCamera 내용 알아보기 


three.js의 기초 Camera를 설정하는 부분에 대해서 알아 보겠습니다.


var camera = new THREE.PerspectiveCamera(fov, aspect_ratio, frustum_near, frustum_far);


fov : field of view , 시야각


3D게임에서 한 화면에서 어느 정도 공간을 보여줄 것인지를 설정하는 값

Fov가 90인 화면은 전방위를 1/4의 영역이 화면에 보이는 것.


평균적으로 인간의 안구는 fov 값은 보통 110도 내외

눈을 굴릴 경우, 좌우 약 220도 , 상하는 90도


즉, fov는 한번에 볼 수 있는 시야 영역

fov 값이 높다면, 같은 화면으로 더 넓은 영역을 볼 수 있지만,

상이 일그러지게 된다.



fov = 20 , 50 , 90

초록색 상자 = 첫번째로 큼, 두번째로 큼, 가장 작다

숫자가 낮을 수록 시야각이 좁아짐으로 초록색 면이 더 크게 보인다.

 

012





aspect_ratio

카메라의 가로세율 비율

일반적으로 뷰포트는 요소의 너비를 높이로 나눈 값을 사용하는 것을 권장.

뭉게지거나 찌그러짐 현상을 방지하기 위한 권장.

기본값은 1 , 정사각형 캔버스


aspect_ratio = (9/ 10) , (18 / 10) , (27 / 10) 


분자가 커질 수록 세로는 길어지고, 가로는 얇아진다


여기서

window.innerWidth/window.innerHeight의 값은

console.log(window.innerWidth / window.innerHeight)

1.8328416912487708

012



frustum_near , frustum_far


절두체 : 시야에시는 영역을 표현하는 프로그램의 부하를 줄이기 위해서 컬링을 구해야함.

글로 이해하기 어렵습니다. 참고사이트에 위키피디아의 이미지를 보시면 이해하기 쉬어요!!


원본이미지 주소 및 저작권 : http://www.falloutsoftware.com/tutorials/gl/gl0.htm


참고 사이트 : https://en.wikipedia.org/wiki/Viewing_frustum



결과화면 및 테스트




블로그 이미지

미나미나미

,