Three.js: Perspective 카메라의 FOV 계산

수직 시야 vFOV 및 카메라로부터의 거리 dist 고려할 때 보이는 height 다음과 같습니다.

height = 2 * Math.tan( ( vFOV / 2 ) ) * dist;

보이는 width 는

aspect = window_width / window_height;
hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
width  = 2 * Math.tan( ( hFOV / 2 ) ) * dist;

THREE.js에서 카메라의 시야각 매개 변수는 수직 매개 변수입니다.

두 가지 방정식 세트를 사용하여 필요한 vFOV를 두 번 계산하고 더 큰 답을 선택합니다.

답장 해주셔서 감사합니다 :)
그래도 좀 혼란 스러워요. 변수 vFOV는 어디서 얻습니까?
장면을 채워야하는 물체의 높이입니까?
그렇다면 이상한 숫자 (1000 범위)가 표시되므로이를 최종 FOV로 변환하려면 어떻게해야합니까?

나는 Fiddle http://jsfiddle.net/dmYgr/6/을 만들었습니다.
어떻게하는지 보여줄 수 있나요?

또 다시 감사합니다. 귀하의 게시물에서 나는 이미 당신이 나보다 더 천재라고 느낄 수 있습니다.)

첫 번째 방정식을 사용하여 vFOV 를 구한 다음이를 카메라의 fov 매개 변수로 사용합니다.

내 장면은 800 * 600입니다.
카메라의 거리는 1000입니다.

공식에서이 숫자를 어떻게 사용합니까?
vFOV에 무엇을 입력해야할지 모르겠습니다.

높이 = 2 * Math.tan ((vFOV / 2)) * dist; <-여기에서 시작하라고하는데 vFOV를 대체해야하는 숫자는 무엇입니까?

첫 번째 방정식을 사용하고 vFOV 하세요.

vFOV = 2 * Math.atan( height / ( 2 * distance ) );

그런 다음이를 카메라의 fov 매개 변수로 사용합니다.

var renderWidth = 800;
var renderHeight = 600;
var cameraPosition = 1000;

var vFOV = 2 * Math.atan( renderWidth / ( 2 * cameraPosition ) );
var height = 2 * Math.tan( ( vFOV / 2 ) ) * cameraPosition;
var aspect = renderWidth / renderHeight;
var hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
var width  = 2 * Math.tan( ( hFOV / 2 ) ) * cameraPosition;

결과:
vFOV = 0.7610127542247298은 유효한 FOV가 아닙니다.

var vFOV = 2 * Math.atan( renderHeight / ( 2 * cameraPosition ) );
var height = 2 * Math.tan( ( vFOV / 2 ) ) * cameraPosition;

var aspect = renderWidth / renderHeight;
var hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
var width  = 2 * Math.tan( ( hFOV / 2 ) ) * cameraPosition;

vFOV = 0.5829135889557342도 유효한 FOV가 아닙니다.

나를 위해 예제를 작성하고 유효한 FOV 번호를 제공하는 예제를 보여줄 수 있습니까?
위 예의 정확한 숫자는 약 37입니다.

당신의 바이올린에서

높이 = 평면 메쉬의 높이 = 500.

거리 = camera.z-plane.z = 1000-100 = 900.

vFOV = 2 * Math.atan (높이 / (2 * 거리)) = 0.5419 라디안 또는 31.04도.

2 * Math.atan (500 / (2 * 900)) = 0.5418937006768411 내 브라우저 (구글 크롬)에 따라

죄송합니다. 라디안에서 도로의 변환 표시를 무시했습니다. 이전 게시물을 업데이트했습니다.

정말 고맙습니다! :디
하, 그것은 10 회신처럼 걸렸지 만 지금은 작동합니다 :).
다시 한 번 감사드립니다!

@Tobiasartz :-)

웨스트 랭글리. 당신은 왕입니다. 감사합니다.

이것은 매우 도움이되었습니다!! @WestLangley 감사

@WestLangley 감사합니다 !!
복사열에서 각도로의 변환을 추가해야한다는 사실을 깨닫는 데 시간이 좀 걸렸기 때문에 여기에 최종 코드로 예제를 추가하겠습니다.

var distance = 1000;
var FOV = 2 * Math.atan( window.innerHeight / ( 2 * distance ) ) * 180 / Math.PI;
var camera = new THREE.PerspectiveCamera( FOV, window.innerWidth/window.innerHeight, 0.1, distance );
camera.position.z = distance;

@ Emanuele-Spatola 공식이 의미가 없습니다. window.innerHeight 에는 픽셀 단위가 있습니다. distance 대부분은 그렇지 않습니다. 보이는 높이의 단위는 거리와 동일해야합니다.

Tobiasartz의 바이올린을 해당 공식으로 업데이트했는데 작동하는 것 같습니다.
http://jsfiddle.net/dmYgr/63/
캔버스는 500px, 비행기는 495x495이며 주위에는 약 5px의 테두리가 있습니다.
1000px가 유효한 거리가 아닌 이유는 무엇입니까?

http://jsfiddle.net/dmYgr/65/

1000px가 유효한 거리가 아닌 이유는 무엇입니까?

피사체 앞에 카메라를 1000 픽셀 배치 한 적이 있습니까?

10 피트 너비의 장면을보기 위해 실제 카메라를 10 피트 떨어진 곳에 배치 할 수 있습니다. 마찬가지로 1000px 너비의 장면을보기 위해 가상 카메라를 1000px 떨어진 곳에 배치 할 수 있습니다.

높이, 장면의 너비, 카메라의 거리를 알 때 사용합니다.

var distance = 1000,height=window.innerHeight,width=window.innerWidth
var diag = Math.sqrt((height*height)+(width*width))
var FOV = 2 * Math.atan( diag / ( 2 * distance ) ) * 180 / Math.PI;
var camera = new THREE.PerspectiveCamera( FOV, window.innerWidth/window.innerHeight, 0.1, distance );
camera.position.z = distance;

이렇게하면 높이> 너비와 같은 상황도 처리됩니다.