Hello, in this video, we are going to look at updating the viewport on resize might be listening to what I've just said, I'm thinking what the hell does that mean? First of all, let's just show you the problem. And that's exactly what it is. It is a problem that we are trying to fix. So if I just go to our scene, we've got this nice cube that's rotating. It looks fine.
Scales, everything. And it's the same principle if there was an entire world there. But watch what happens if I were to resize the browser. The actual viewport, the content within our world does not adjust, it doesn't move. It doesn't resize it don't do any of that stuff, which is obviously very, very bad. Let me show you a number shift.
So if I were to refresh it, so the actual initial browser sizes Well, this is what happens when I resize it, we get white because it hasn't been nothing's been rendered over here to Six, very simple, we've just got to detect when the viewport has been resized, aka your browser and then just update the camera and the renderer. and update the projection matrix was all simple stuff. So if you put this code after the render has been initialized and the document dot body has been set, to want to do window dot add event listener, I'm gonna put resources that's the events that we're listening for. When the resource event occurs, we want to call a method or we want to run this method that we are coding right here. And what we want to do is ball with equals window.in a way you can guess what we're gonna do next ball height equals window, dot inner height.
No renderer dot set sois. We know we know the width and the height. There we go like so very similar to what we've done right here as an extra task. What you could do is actually no, that wouldn't work. Sorry, just ignore me. I'm gonna say you could abstract these values.
Actually, you could do that. You could abstract the declaration of the width and the height variables outside and then just set those values so they can be used. Where you want an extra task for you to do? Now we're gonna do camera dot aspect, we're gonna update the aspect because as you can see, it may not keep the aspect ratio when we saw the animated the aspect ratio when we saw it. So we've got to adjust for the game very simple. You just do camera dot aspect equals width divided by height.
So that's how you calculate the aspect ratio. And finally you do camera.de projection matrix. This is a method and this just updates well the projection matrix and finally, Mr. semicolon, so put that save it, we go back refresh. We've got our cube is spinning. So let's see what happens when we resize it. As you can see, the actual contents of our scene are moving and if we resize the height, it also works Sources of content and as you can see, is keeping the exact ratio.
Our objects don't look distorted or squashed or stretched or anything like that. So in this video, we covered how to update the viewport on resource. Very simple, only a few lines of code, but something very crucial and something that really needed to be covered earlier on in the series. Thank you for watching. If you have any questions, feel free to ask. And as usual, thank you for watching, and I hope you have a great day.