Resize canvas in ThreeJS…

It is a good coding practice to have organize code. When we add more and more codes it is difficult to write JavaScript also in same HTML file. So I created new file called main.js and put JavaScript code to it. Following shows the new folder structure.

With the previous code you have, you may experience canvas does not resize when resizing the window.

I opened the console

When I close console canvas does not resize

Here is the solution for it. Add this code to your main.js file. Event Listener listen for window resize event and when it triggers, onWindowResize() function will be called.

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);

Hope you get to know about canvas resizing.