在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;