Search code examples
camerathree.jsdistortion

Objects distort if near the canvas sides - three.js

I have a three.js scene with spheres, but when I zoom in a sphere and I move with orbit controls so it is in the side of the canvas (on in the center and deep in) it looses its round shape (do not care about the lines) :

enter image description here

What can I do ?

Solution

  • There will always be some distortion, but it is worse with a large camera field-of-view (fov).

    A reasonable value for camera.fov is 40-45 degrees. A smaller value would produce less distortion.

    camera = new THREE.PerspectiveCamera( fov, aspect, near, far );

    And for reference, camera.fov is the field-of-view in the vertical direction.

    three.js r.70