Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

90 degree field of view without distortion in THREE.PerspectiveCamera

Tags:

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.

enter image description here

like image 223
pkout Avatar asked Oct 30 '14 14:10

pkout


2 Answers

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

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.

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

like image 190
WestLangley Avatar answered Oct 13 '22 01:10

WestLangley


Based on WestLangley's awesome answer, here is how to get a fixed horizontal fov in three.js:

var horizontalFov = 90;
camera.fov = (Math.atan(Math.tan(((horizontalFov / 2) * Math.PI) / 180) / camera.aspect) * 2 * 180) / Math.PI;
like image 32
Simon Epskamp Avatar answered Oct 13 '22 01:10

Simon Epskamp