Object Stretches in a weird way from side to side

Questions
1

Hi all,

I have a project where I need to show the canvas only on the top 50% of the screen. The lower part is used to show some object related details etc.

So at the moment when I render the object at the center of the canvas, it looks really thin at the beginning and when I start panning it to the sides it starts stretching outwards/scaling up a bit in a weird way.

I have written this jsfiddle and kinda replicates the issue that I faced in my project.
https://jsfiddle.net/srinivasprabhu794/pj31zsya/45/

Here’s another one with BoxGeometry instead. Its more clear here.
https://jsfiddle.net/srinivasprabhu794/pj31zsya/46/

What could be happening in this case? Is there something wrong with the camera/orbit controls setup?

Any help regarding the same will be appreciated.

Thanks a lot.

Regards
Srinivas

2

Its the camera distortion, depending on your FOV. Setting it less wide (smaller number, try 20) will give you less distortion.

camera = new THREE.PerspectiveCamera( 20, upperDivElement.clientWidth / upperDivElement.clientHeight, 1, 10000 );

3

Hi @weiserhei,

Yes, that seemed to be the issue here. It is fixed now. Just out of curiosity, why does this not happen when I fullscreen the window? My current aspect ratio is close to 3:1, but the fullscreen aspect is close to 2:1.

4

You already answered the question yourself there :slight_smile:
I dont know enough about the internals, so I can just guess. From my observations the closer your viewport aspect ratio comes to 1, the less distortion you get on the sides (because there are no “sides”, only the center portion of your view).

5

Great! Thanks a lot for this update man. I think I understand it now :slight_smile: