# Object Stretches in a weird way from side to side

**URL:** <https://discourse.threejs.org/t/object-stretches-in-a-weird-way-from-side-to-side/17923>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [August 15, 2020, 2:59pm UTC](https://discourse.threejs.org/t/object-stretches-in-a-weird-way-from-side-to-side/17923 "2020-08-15T14:59:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [August 15, 2020, 2:59pm UTC](https://discourse.threejs.org/t/object-stretches-in-a-weird-way-from-side-to-side/17923/1 "2020-08-15T14:59:43Z")

</div>

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/](https://jsfiddle.net/srinivasprabhu794/pj31zsya/45/)

Here’s another one with BoxGeometry instead. Its more clear here.  
[https://jsfiddle.net/srinivasprabhu794/pj31zsya/46/](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

---

<div class="post-metadata">

**Author:** ![weiserhei](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/weiserhei/32/1837_2.png) [@weiserhei](https://discourse.threejs.org/u/weiserhei)\
**Post date:** [August 15, 2020, 6:25pm UTC](https://discourse.threejs.org/t/object-stretches-in-a-weird-way-from-side-to-side/17923/2 "2020-08-15T18:25:12Z")

</div>

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 );`

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [August 16, 2020, 2:55am UTC](https://discourse.threejs.org/t/object-stretches-in-a-weird-way-from-side-to-side/17923/3 "2020-08-16T02:55:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![weiserhei](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/weiserhei/32/1837_2.png) [@weiserhei](https://discourse.threejs.org/u/weiserhei)\
**Post date:** [August 17, 2020, 1:05pm UTC](https://discourse.threejs.org/t/object-stretches-in-a-weird-way-from-side-to-side/17923/4 "2020-08-17T13:05:31Z")

</div>

You already answered the question yourself there 🙂  
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).

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [August 17, 2020, 2:19pm UTC](https://discourse.threejs.org/t/object-stretches-in-a-weird-way-from-side-to-side/17923/5 "2020-08-17T14:19:33Z")

</div>

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