javascript - 三JS : Calculating FOV for perspective camera after browser window resize

Question

浏览器窗口大小改变后，我需要获取正确的 Three.JS 相机 FOV。我已查看以下问题，但似乎找不到我的问题的答案:

• How to calculate fov for the Perspective camera in three js?
• Calculating frustum FOV for a PerspectiveCamera

我的相机设置如下(“this”指我设置的 gameCamera 对象):

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
);

当用户调整浏览器窗口大小时，将调用以下更新代码。我包含了在这里找到的代码:( How to calculate fov for the Perspective camera in three js? )，用于尝试计算新的 FOV ('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 场景的宽度要大得多。渲染的 View 似乎没有扭曲(即没有或多或少的“鱼眼”外观)。但camera.fov值没有改变(在控制台日志中，我之前得到“45”作为FOV，之后得到“45”作为FOV)并且我计算的FOV根本不正确——值为“6.33189” ...'。

因此在我看来，FOV是用来设置projectionMatrix的，但是当调用updateProjectionMatrix()时，并没有进行反向计算来更新FOV。我正在使用 THREE.JS r87(修订版 87)。

这是我在此 ( How to calculate fov for the Perspective camera in 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？

提前致谢

--- 编辑 ----

问完这个问题后，我决定尝试看看是否能解决这个问题。

我从@rabbid76 的优秀图表开始:Calculating frustum FOV for a PerspectiveCamera如果知道远平面尺寸和相机距离，我修改了图像以显示计算 FOV 的公式的推导。

现在我明白了公式的推导。我发现，如果给定起始垂直 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;

但我还是被困住了。我不明白渲染窗口大小(即浏览器窗口)和远平面大小之间的相关性。如果我的cameraDist很大(例如1,000,000)，我的远平面也会很大。

我假设我的渲染窗口位于近平面和远平面之间。所以我需要的是到渲染平面的距离。

我仍然不知道在更改 window.innerHeight 或 window.innerWidth 后如何确定新的相机 FOV。

-- 编辑 2--

@rabbid76 在评论中建议了正确答案。我想理解它，所以在考虑时做了一些图表:

该图显示，随着视口(viewport)平面尺寸的变化 (h1 --> h2)，我们可以计算出有效视野 (FOV) 的变化。

如果视口(viewport)不是方形的，那么在已知垂直 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()

Answer 1

如果你想知道，如果一个点位于 View 体积中并且未被剪切，那么你必须将该点投影到视口(viewport)上。
使用Vector3.project为此:

camera   = THREE.PerspectiveCamera
pt_world = Three.Vector3

pt_ndc = new THREE.Vector3()
pt_ndc.copy(pt_world).project(camera)

结果是 Cartesian coordinate如果结果位于标准化设备空间中，则该点位于 View 体积中(在视口(viewport)上)。归一化的设备空间的范围是从(-1,-1,-1)到(1,1,1)，形成一个完美的立方体体积。(参见Transpose z-position from perspective to orthographic camera in three.js)

请注意，投影矩阵描述了从场景的 3D 点到视口(viewport)的 2D 点的映射。投影矩阵从 View 空间变换到剪辑空间，并且剪辑空间中的坐标变换为范围为 (-1, -1, -1) 到 (1, 1, 1) 的归一化设备坐标 (NDC)除以剪辑坐标的 w 分量。