# 3D object becomes deformd when resizing the canvas

**URL:** <https://discourse.threejs.org/t/3d-object-becomes-deformd-when-resizing-the-canvas/30029>\
**Category:** Questions\
**Created:** [September 18, 2021, 4:24am UTC](https://discourse.threejs.org/t/3d-object-becomes-deformd-when-resizing-the-canvas/30029 "2021-09-18T04:24:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anne](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@Anne](https://discourse.threejs.org/u/Anne)\
**Post date:** [September 18, 2021, 4:24am UTC](https://discourse.threejs.org/t/3d-object-becomes-deformd-when-resizing-the-canvas/30029/1 "2021-09-18T04:24:28Z")

</div>

I load a MMD model into the page(base on MMDLoader.js), but I want the canvas at the left side of the page, so I can add something else at the right side.  
But after I resize it , the model inside the canvas becomes deformed.

before resize:

```javascript
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

```

 ![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/b/5bb8aca2073622a1761607e7d557bc9eefcf8e3b.jpeg)

after resize:

```javascript
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(700, 700);
container.appendChild(renderer.domElement);

```

 ![3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/e/3e39991375814aba45cacb213ac6031c32fcf10b.png)

Is there anyone know how to fix it?  
Thanks very much!

[update] 2021/9/18 1:32pm  
I’ve just solved the problem!  
Besides the code: `renderer.setSize(the width you want, the height you want);`,  
also do this:

```javascript
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

```

Just change “window.innerWidth” and “window.innerHeight” to whatever the value that you want.  
(I set the value to the width and height of my div.)

Hope this can help those came into the same question as me!

---

<div class="post-metadata">

**Author:** ![bhushan6](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bhushan6/32/19074_2.png) [@bhushan6](https://discourse.threejs.org/u/bhushan6)\
**Post date:** [September 18, 2021, 1:46pm UTC](https://discourse.threejs.org/t/3d-object-becomes-deformd-when-resizing-the-canvas/30029/2 "2021-09-18T13:46:45Z")

</div>

You need to call camera.updateProjectionMatrix() method In resize handler to let the camera know that you have changed some size parameters

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 18, 2021, 2:12pm UTC](https://discourse.threejs.org/t/3d-object-becomes-deformd-when-resizing-the-canvas/30029/3 "2021-09-18T14:12:36Z")

</div>

Usual scenario for resize:

```javascript
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height)

```

---

<div class="post-metadata">

**Author:** ![Anne](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@Anne](https://discourse.threejs.org/u/Anne)\
**Post date:** [September 28, 2021, 12:49pm UTC](https://discourse.threejs.org/t/3d-object-becomes-deformd-when-resizing-the-canvas/30029/4 "2021-09-28T12:49:06Z")

</div>

thanks for answering the question. I will give it a try!

---

<div class="post-metadata">

**Author:** ![Anne](https://avatars.discourse-cdn.com/v4/letter/a/ccd318/32.png) [@Anne](https://discourse.threejs.org/u/Anne)\
**Post date:** [September 28, 2021, 12:49pm UTC](https://discourse.threejs.org/t/3d-object-becomes-deformd-when-resizing-the-canvas/30029/5 "2021-09-28T12:49:48Z")

</div>

ok thank you! I will try it next time!