我需要在浏览器窗口大小改变后获取正确的Three.JS相机FOV。我已经查看了以下问题,但似乎找不到我的问题的答案:
我的相机设置如下('this'指的是我设置的gameCamera对象):
当用户调整浏览器窗口大小时,将调用以下更新代码。我在这里包含了我找到的代码:(如何在three.js中计算透视相机的视野?),以尝试计算新的视野('aFOV')。
但是它似乎不起作用。例如,当窗口被调整大小时,比如将其拖动500像素更宽,我可以看到渲染的3D场景的宽度大得多。渲染的视图似乎没有失真(即没有更多或更少的“鱼眼”效果)。但是camera.fov值没有改变(在控制台日志中,我得到的是FOV为'45'之前和之后都是'45'),而我的计算出来的FOV完全不正确——它的值是'6.33189...'。
因此,在我看来,FOV用于设置projectionMatrix,但是当调用updateProjectionMatrix()时,没有进行相反的计算来更新FOV。我正在使用THREE.JS r87(第87版)。
以下是我在这个链接(如何在three.js中计算透视相机的FOV)上找到的原始代码:
那个链接上的评论似乎表明这个公式是正确的。
问题:
- 我的理解是,camera.updateProspectiveMatrix() 不会改变 .fov 属性,我对吗? - 我的理解是,当屏幕变宽时,FOV 会发生变化,我对 FOV 的理解是否有误? - 我做错了什么?如何正确计算相机的 FOV?
提前感谢。
--- 编辑 ---
在提出问题后,我决定尝试看看能否弄清楚这个问题。
我从 @rabbid76 这里找到了一个很好的图表,链接在这里:Calculating frustum FOV for a PerspectiveCamera。我修改了这张图片,展示了如果已知远平面尺寸和相机距离,如何推导计算 FOV 的公式。 我现在明白了这个公式的推导过程。而且我发现,如果给定一个起始的垂直视野角度,那么我可以按照以下方式计算远平面的宽度和高度:
但是我还是卡住了。我不明白渲染窗口大小(即浏览器窗口)和远平面大小之间的关联。如果我的相机距离很大(例如1,000,000),那么我的远平面也会很大。
我假设我的渲染窗口位于近平面和远平面之间。所以我需要的是到渲染平面的距离。
我仍然无法弄清楚如何确定在window.innerHeight或window.innerWidth更改后的新相机FOV。
- 编辑2 -
@rabbid76在评论中提出了正确的答案。我想要理解它,所以在考虑这个问题时画了一些图表。 图表显示的是随着视口平面尺寸的变化(从h1到h2),可以计算出有效视野(FOV)的变化。
如果视口不是正方形,则可以使用此公式计算水平FOV,前提是已知垂直FOV和宽高比。
为了得出最终答案,我使用以下代码:
然后,当用户调整屏幕大小时,我使用这段代码。
const CAMERA_DIST = 8000;
-other stuff-
this.camera = new THREE.PerspectiveCamera(
45, //FOV parameter
window.innerWidth / window.innerHeight, //aspect ratio parameter
1, //frustum near plane parameter
CAMERA_DIST //frustum far plane parameter
);
当用户调整浏览器窗口大小时,将调用以下更新代码。我在这里包含了我找到的代码:(如何在three.js中计算透视相机的视野?),以尝试计算新的视野('aFOV')。
function onWindowResize() {
gameCamera.camera.aspect = window.innerWidth / window.innerHeight;
console.log(gameCamera.camera.fov);
gameCamera.camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
console.log(gameCamera.camera.fov);
let aFOV = 2*Math.atan((window.innerHeight)/(2*CAMERA_DIST)) * (180/Pi);
console.log(aFOV);
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
} //onWindowResize()
但是它似乎不起作用。例如,当窗口被调整大小时,比如将其拖动500像素更宽,我可以看到渲染的3D场景的宽度大得多。渲染的视图似乎没有失真(即没有更多或更少的“鱼眼”效果)。但是camera.fov值没有改变(在控制台日志中,我得到的是FOV为'45'之前和之后都是'45'),而我的计算出来的FOV完全不正确——它的值是'6.33189...'。
因此,在我看来,FOV用于设置projectionMatrix,但是当调用updateProjectionMatrix()时,没有进行相反的计算来更新FOV。我正在使用THREE.JS r87(第87版)。
以下是我在这个链接(如何在three.js中计算透视相机的FOV)上找到的原始代码:
var height = 500;
var distance = 1000;
var fov = 2 * Math.atan((height) / (2 * distance)) * (180 / Math.PI);
itsLeftCamera = new THREE.PerspectiveCamera(fov , 400 / 500, 1.0, 1000);
那个链接上的评论似乎表明这个公式是正确的。
问题:
- 我的理解是,camera.updateProspectiveMatrix() 不会改变 .fov 属性,我对吗? - 我的理解是,当屏幕变宽时,FOV 会发生变化,我对 FOV 的理解是否有误? - 我做错了什么?如何正确计算相机的 FOV?
提前感谢。
--- 编辑 ---
在提出问题后,我决定尝试看看能否弄清楚这个问题。
我从 @rabbid76 这里找到了一个很好的图表,链接在这里:Calculating frustum FOV for a PerspectiveCamera。我修改了这张图片,展示了如果已知远平面尺寸和相机距离,如何推导计算 FOV 的公式。 我现在明白了这个公式的推导过程。而且我发现,如果给定一个起始的垂直视野角度,那么我可以按照以下方式计算远平面的宽度和高度:
this.cameraDist = CAMERA_DIST;
this.aspectRatio = window.innerWidth / window.innerHeight;
this.farPlaneHeight = Math.tan(this.vertFOV/2) * this.cameraDist;
this.farPlaneWidth = this.Height * this.aspectRatio;
但是我还是卡住了。我不明白渲染窗口大小(即浏览器窗口)和远平面大小之间的关联。如果我的相机距离很大(例如1,000,000),那么我的远平面也会很大。
我假设我的渲染窗口位于近平面和远平面之间。所以我需要的是到渲染平面的距离。
我仍然无法弄清楚如何确定在window.innerHeight或window.innerWidth更改后的新相机FOV。
- 编辑2 -
@rabbid76在评论中提出了正确的答案。我想要理解它,所以在考虑这个问题时画了一些图表。 图表显示的是随着视口平面尺寸的变化(从h1到h2),可以计算出有效视野(FOV)的变化。
如果视口不是正方形,则可以使用此公式计算水平FOV,前提是已知垂直FOV和宽高比。
为了得出最终答案,我使用以下代码:
//Below is code used when initializing the perspective camera
this.viewportWidth = window.innerWidth;
this.viewportHeight = window.innerHeight;
this.aspectRatio = window.innerWidth / window.innerHeight;
this.vertFOV = params.FOV || CAMERA_FOV
this.horizFOV = this.calculateHorizFOV();
this.camera = new THREE.PerspectiveCamera(this.vertFOV, this.aspectRatio, 1, this.cameraDist);
...
calculateHorizFOV() {
let radVertFOV = this.vertFOV * Pi/180;
let radHhorizFOV = 2 * Math.atan( Math.tan(radVertFOV/2) * this.aspectRatio);
let horizFOV = radHorizFOV * 180/Pi;
return horizFOV;
}
然后,当用户调整屏幕大小时,我使用这段代码。
function onWindowResize() {
let oldHeight = gameCamera.viewportHeight;
let oldWidth = gameCamera.viewportWidth;
let newHeight = window.innerHeight;
let newWidth = window.innerWidth;
gameCamera.viewportHeight = newHeight;
gameCamera.viewportWidth = newWidth;
gameCamera.aspectRatio = newWidth / newHeight;
let oldRadFOV = gameCamera.vertFOV * Pi/180;
let newRadVertFOV = 2*Math.atan( Math.tan(oldRadFOV/2) * newHeight/oldHeight);
gameCamera.vertFOV = newRadVertFOV * 180/Pi;
gameCamera.calculateHorizFOV();
gameCamera.camera.aspect = gameCamera.aspectRatio;
gameCamera.camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
} //onWindowResize()
camera.fov
是垂直FOV,而不是水平FOV。请参见https://stackoverflow.com/questions/17837652/calculating-frame-and-aspect-ratio-guides-to-match-cameras/17840405#17840405。 - WestLangley