three.js - THREE.PerspectiveCamera 90 度视野无失真

Question

我正在构建一个在 THREE.js 上运行的网站来生成 3D 世界。根据视频游戏的经验，我知道他们通常使用大约 90 度的摄像机视野角。然而，当我将 THREE.js 中的 PerspectiveCamera 设置为如此高的 FOV 值时，场景会严重扭曲。这种扭曲在游戏中以某种方式消除，同时保留了大视野。这是怎么做到的？我也可以在 THREE.js 中执行此操作吗？谢谢!

这就是相机的创建方式:

new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    100, 
    10000000
);

生成的图像是这样的。看到地球在水平方向上是如何拉伸(stretch)的吗？这就是我想要摆脱的。

Answer 1

在 Three.js 中，camera.fov 是垂直视野(以度为单位)。

水平视野由垂直视野和显示图像的纵横比决定。

hFOV = 2 * Math.atan( Math.tan( camera.fov * Math.PI / 180 / 2 ) * camera.aspect ) * 180 / Math.PI; // degrees

camera.fov 的合理值为 40 到 50 度。这会产生最小的失真，并且根据显示器的纵横比，产生 80 或 90 度的水平 FOV。

在您的示例中，您指定了 75 度的垂直 FOV，这意味着大约 110 度的水平 FOV。

三.js r.69