ThreeJS：调整浏览器窗口大小后计算透视相机的 FOV

Question

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

• 如何用三个js计算透视相机的fov？
• 计算透视相机的视锥体 FOV

我的相机设置如下（“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
);

当用户调整浏览器窗口大小时，将调用以下更新代码。我包含了在这里找到的代码：（如何用三个 js 计算透视相机的 fov？）用于尝试计算新的 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 场景的宽度要大得多。渲染的视图似乎没有扭曲（即没有或多或少的“鱼眼”外观）。但camera.fov值没有改变（在控制台日志中，我之前得到“45”作为FOV，之后得到“45”作为FOV）并且我计算的FOV根本不正确——值为“6.33189” ...'。

因此，在我看来，FOV 用于设置投影矩阵，但是当调用 updateProjectionMatrix() 时，不会进行反向计算来更新 FOV。我正在使用 THREE.JS r87（修订版 87）。

这是我在此找到的用于计算 FOV 的原始代码（How to Calculate fov for the Perspective Camera in Three js?）链接：

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 在这里找到的优秀图表开始：计算 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 在评论中建议了正确的答案。我想理解它，所以在考虑时做了一些图表：

该图显示，随着视口平面大小的变化 (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()

Answer 1

如果您想知道，如果一个点位于视图体积中并且未被剪切，那么您必须将该点投影到视口上。
用于Vector3.project此：

camera   = THREE.PerspectiveCamera
pt_world = Three.Vector3

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

如果结果位于标准化设备空间中，则结果是笛卡尔坐标，并且该点位于视图体积中（在视口上）。归一化的设备空间的范围是从(-1,-1,-1)到(1,1,1)，形成一个完美的立方体体积。（请参阅在 Three.js 中将 z 位置从透视转置为正交相机）

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