THREE.PerspectiveCamera 中无失真的 90 度视野 [英] 90 degree field of view without distortion in THREE.PerspectiveCamera

问题描述

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

I am building a website running on THREE.js to generate a 3D world. From experience with video games, I know they usually use a camera field of view angle of about 90 degrees. When I set PerspectiveCamera in THREE.js to such a high FOV value, however, the scene is severely distorted. This distortion is somehow removed in games while preserving the large field of view. How is this done? Can I do this in THREE.js, too? Thanks!

这就是相机的创建方式:

This is how the camera is created:

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

生成的图像是这样的.看看地球是如何在水平方向上拉伸的?这就是我想要摆脱的.

The resulting image is this. See how the earth is stretched in the horizontal direction? That's what I am trying to get rid of.

推荐答案

在three.js中，camera.fov是以度为单位的垂直视野.

In three.js, camera.fov is the vertical field-of-view in degrees.

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

The horizontal field-of-view is determined by the vertical field-of-view and the aspect ratio of the display image.

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.

A reasonable value for camera.fov is 40 to 50 degrees. This yields minimal distortion, and depending on the aspect ratio of the display, yields a horizontal FOV of 80 or 90 degrees.

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

In your example, you have specified a vertical FOV of 75 degrees, which implies a horizontal FOV of about 110 degrees.

three.js r.69

three.js r.69

这篇关于THREE.PerspectiveCamera 中无失真的 90 度视野的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！