logo标签列表

ThreeJS: 在浏览器窗口调整大小后计算透视相机的视野角度

javascriptthree.js3dperspectivecamera
6
我需要在浏览器窗口大小改变后获取正确的Three.JS相机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
);

当用户调整浏览器窗口大小时，将调用以下更新代码。我在这里包含了我找到的代码：（如何在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 的公式。

enter image description here

我现在明白了这个公式的推导过程。而且我发现，如果给定一个起始的垂直视野角度，那么我可以按照以下方式计算远平面的宽度和高度：
  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在评论中提出了正确的答案。我想要理解它，所以在考虑这个问题时画了一些图表。

enter image description here

图表显示的是随着视口平面尺寸的变化（从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()
1
camera.fov是垂直FOV，而不是水平FOV。请参见https://stackoverflow.com/questions/17837652/calculating-frame-and-aspect-ratio-guides-to-match-cameras/17840405#17840405。 - WestLangley
我也想到了，应该有水平FOV和垂直FOV。在上面的讨论中，我只是改变了屏幕的宽度，这样会改变水平FOV。但我复制的公式只考虑了高度...我看到@WestLangley也指出了这一点。但这仍然没有解决我的问题。 - kdtop
1
@Rabbid76，感谢您的关注。我的动机是能够判断渲染对象是否在视口中可见。如果不可见，则将相机远离场景。我将通过计算向量到对象和相机视线之间的角度来实现这一点。如果对象的角度大于1/2 FOV，则无法看到它。所以我只需要FOV。我不想改变透视图。我只需要在用户调整浏览器窗口大小时做出响应。这似乎不会改变透视图，但确实会改变FOV。 - kdtop
@Rabbid76 需要我一点时间来消化你提出的公式。谢谢。 - kdtop
也许这会有所帮助：https://dev59.com/QGUq5IYBdhLWcg3wSepm#14614736 - WestLangley
感谢@WestLangley。你提到的camera.fov是垂直视场角非常有帮助！ - kdtop
1个回答
2
如果你想知道一个点是否在视图体积中且没有被剪裁，则需要将该点投影到视口上。
使用 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点的映射。投影矩阵将从视图空间转换到剪辑空间，剪辑空间中的坐标通过除以剪辑坐标的w分量而被转换为标准化设备坐标（NDC），其范围为(-1,-1,-1)到(1,1,1)。

我将此回答标记为被接受的答案，因为@Rabbid76在上面的评论中给了我正确的答案，而且我想让他得到认可。这个帖子没有直接回答我的问题，请参见原始问题中的第二次编辑以获取说明。 - kdtop
1
这个答案做到了我最终想要做的事情（查看一个对象是否在视口中）。 - kdtop
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接