Listen for window resize events to update the camera aspect ratio and renderer size. Prevent the scene from stretching or distorting when the browser window changes dimensions.
Lesson 9 of 14
Modern Three.js Course
Go from zero to a modular Three.js app with Vite and TypeScript.
Transcript
[00:00] So right now the canvas is hardcoded to have a size of 400 by 300, so that's why it doesn't occupy the whole window. We're going to change that. So to do that we're going to go up in our file and we're going to create another section. And we're going to come here and create a variable called size and we're gonna say that width is equal not to hit on red but to inner width and window inner height. Once we have that we're going to go here and say size width and size height.
[00:43] To get the actual radio here we can do exactly the same We can use size width and size height. If we hit save, now we can go to the inspector here and check that is the app that has here the padding. So we're gonna remove this padding right here and voila! Orisin is occupying the whole window. But there is an issue that we haven't tackled yet.
[01:10] And that is that if we resize the browser, instead of resizing the scene with the windows resizing, we're cropping the scene below. So to fix that we're gonna go here and we're gonna use the object window and we're gonna add an event listener and we're gonna listen for the resize event which accepts a callback as a function and we're gonna console.log essentially the same object that we created at the beginning. So width is window inner width and Inner height so if we hit save and we check the developer tools We see that the initial we have two And if we resize we're gonna see that this change the width and the height of our object. If we go here and we say camera aspect equal and we say window inner width divided by window inner height actually we could do the same as we did before and say cons size Equal and we copy exactly this again and then we use it for the camera aspect So camera aspect is going to be equal to sizes with divided by sizes dot height Then we need to update the projection matrix of the camera in order to see the changes.
[02:51] So we're going to use updateProjectMatrix. This will avoid artifacts. So updateProjection... Yeah, projection matrix. It was this one.
[03:05] Okay, and last but not least, we're going to ask the renderer to set the size to these new values, which are going to be sizes.width and sizes.height. If we hit save and then we try to resize the window, now you can see that the whole thing adapts to the new size of the window, making it way more responsive.