Resize canvas in ThreeJS…
Jan 18, 2021
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.
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.