Updating Aspect Ratio on Window Resize in Three.js

To properly handle window resizing in Three.js and prevent your shapes from being distorted, you need to:

1. Update the renderer size
2. Update the camera's aspect ratio
3. Update the camera's projection matrix

Here's how you can implement this in your animation loop:

Window Resize Handler

First, add an event listener for window resizing:

JAVASCRIPTCopied
window.addEventListener('resize', onWindowResize);

function onWindowResize() {
  // Update camera
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  
  // Update renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
}

Implementation in Your Animation Loop

While you can check for size changes in your animation loop, it's more efficient to use the event listener approach above. However, if you need to include it in your animation loop for some reason:

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  
  // Your animation code here
  
  renderer.render(scene, camera);
}

Key Points

1. The camera.updateProjectionMatrix() call is crucial - without it, changing the aspect ratio won't take effect.

2. The renderer.setSize() method handles updating the canvas size while taking device pixel ratio into account.

3. For best performance, handle resizing through the window resize event rather than checking in every frame of your animation loop.

This approach will ensure your 3D objects maintain their proper proportions regardless of the window size.