3D object becomes deformd when resizing the canvas

Questions
1

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:

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

1
11920Ă—898 98.1 KB

after resize:

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

3
31920Ă—898 84.5 KB

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:

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!

2

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

1 Like
3

Usual scenario for resize:

camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height)
1 Like
4

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

5

ok thank you! I will try it next time!