Learn Three.js - Third Edition

Automatically resize the output when the browser size changes

Changing the camera when the browser is resized can be done pretty simply. The first thing we need to do is register an event listener as follows:

window.addEventListener('resize', onResize, false); 

Now, whenever the browser window is resized, the onResize function, which we'll specify next, is called. In this onResize function, we need to update the camera and renderer, as follows:

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

For the camera, we need to update the aspect property, which holds the aspect ratio of the screen, and for the renderer, we need ...