CODEWITHSUNDEEP
camerathree.jsdistortion
user1866818
user1866818

Reputation:

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 ?

Upvotes: 2

Views: 2363

Answers (2)

Brendan Annable
Brendan Annable

Reputation: 2747

This is expected behaviour of a THREE.PerspectiveCamera. Try it yourself with a digital camera at home.

The only real way to fix it is to use an THREE.OrthographicCamera, but this likely has other issues you do not want to have, such as objects not becoming smaller when they are further away.

Upvotes: 0

WestLangley
WestLangley

Reputation: 104793

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

Upvotes: 4

Related Questions