Best coding pattern for onresize?

[digitalArt3DTobias]

Is your feature request related to a problem? Please describe.

First of all, thank you very much for this amazing package which is a valuable enhancement of three.js!

I noticed that the usual onresize pattern ...

window.onresize = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}

... doesn't seem to work with camera-controls: The content will be scaled non-proportonally.

I couldn't find any info about this issue, but I managed to fix it (partially) with this code:

window.onresize = () => {
  cameraControls.saveState();
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  cameraControls.reset(false);
  renderer.setSize( window.innerWidth, window.innerHeight );
}

I'm not sure whether this is the best possible approach, and my question is if there is a solution that also works when the page is being resized during a running animation?

I've encountered this issue when creating this demo:

https://jsfiddle.net/gup9m3zd/

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

No response

[Akihiro Oyamada]

Sorry for the delay,

Resizing should work the same as other three.js official demos, even using camera-controls.

However, you may need re-rendering if you encounter the below.

The content will be scaled non-proportonally.

therefore, What you need is:

window.onresize = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.render( scene, camera );
}

or

window.addEventListener( 'resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.render( scene, camera );
} );