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

Question

我需要在浏览器 window 大小更改后获得正确的 Three.JS 相机 FOV。我查看了以下问题，但似乎找不到我的问题的答案：

How to calculate fov for the Perspective camera in three js?

我的相机是这样设置的（'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
);

当用户调整浏览器window大小时，调用以下更新代码。我包含了我在此处找到的代码：(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()

不过好像不行。在调整 window 的大小后，例如将其拖动到 500 像素宽，我可以看到渲染的 3D 场景的宽度更大。呈现的视图似乎没有扭曲（即没有或多或少 'fisheye' 外观）。但是 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?) link 找到的用于计算 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);

那个link的评论似乎表明公式是正确的。

问题：

我是否正确认为 camera.updateProspectiveMatrix() 不会更改 .fov 属性？
我对屏幕变宽时 FOV 会发生变化的理解是否正确？还是我对 FOV 的含义有些困惑？
我做错了什么？如何正确计算相机 FOV？

提前致谢

---编辑----

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

我从 @rabbid76 的优秀图表开始：我修改了图像以显示计算 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;

但我还是卡住了。我不明白渲染 window 大小（即浏览器 window）和远平面大小之间的相关性。如果我的 cameraDist 很大（例如 1,000,000），我的远平面也会很大。

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

在更改为 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)

结果是 Cartesian coordinate，如果结果在规范化设备 space 中，则点在视图体积中（在视口上）。标准化设备 space 的范围从 (-1, -1, -1) 到 (1, 1, 1) 并形成一个完美的立方体体积。（参见）

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

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

ThreeJS: Calculating FOV for perspective camera after browser window resize

3d

three.js

perspectivecamera