在THREE.PerspectiveCamera中没有扭曲的90度视野

Question

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

这是相机的创建方式：

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

结果图像就是这样。看看地球是如何在水平方向上拉伸的？这就是我想要摆脱的。

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，这意味着水平FOV约为110度。

three.js r.69

Answer 2

基于WestLangley的精彩回答，以下是如何在three.js中获得固定的水平fov：

var horizontalFov = 90;
camera.fov = (Math.atan(Math.tan(((horizontalFov / 2) * Math.PI) / 180) / camera.aspect) * 2 * 180) / Math.PI;