Organize your Three.js Project - Part 2

[00:01] Next, we're going to move all this logic about the renderer into its own factory function. So let's create another folder here. I mean, you can actually do it directly in source, but I like to keep my things organized. So I'm gonna do core and then create render.ts. Here we can create the functions.

[00:28] It's gonna be export function, create renderer. And we need two things here because we are going to move this part here and this part here so let's clean it from here and copy it here. So we need to import the WebGL renderer. We need the canvas, so we need to pass the canvas down. And for this, we're gonna use the resize of server.

[00:59] So we also need to pass the resize of server down. We should be typing this probably. So it's a good idea to create an interface for it. So I'm gonna do this interface, which is basically the canvas, it's an HTML canvas element. And this is gonna be the return type of the factor function for size of server.

[01:23] So in order to use this type, we're gonna do like this and put it here. Okay, so we have the canvas right here. We need to pass the sizes for the render. So we're gonna do const and deconstruct width and height of the use, no, the resize of server and we're gonna call the getSize. And here we're gonna remove this and this and it's gonna be width and height.

[01:57] So with that, we are setting the initial size of the render. So now we need to register on the window resize. So it's gonna be resize of server on resize. That's gonna be the width and height because it returns the size. And let's do this.

[02:23] And let's get back here and see what we're doing here. So we are doing render set size like this, but instead of sizes, we're getting the parameters directly here. Okay, so this is done. Why is this complaining? Oh, because I missed, yeah, I missed here like this and like this.

[02:52] Okay, now it's correct. So these are the parameters and We are setting the render size, but we also need the possibility to unsubscribe to this so it's gonna be on soups drive equal to the resize of server. So whenever we want to unsubscribe, we are just going to call this method like this. So that's why we created this right here. It's a returns call by X delete.

[03:21] Okay, so we are going to return, turn here. We're gonna return the renderer and we're gonna return a dispose function which is basically going to call unsubscribe. So it's gonna be like this, unsubscribe. And also I think we need to do renderer dispose. This is gonna make sense in a moment.

[04:01] And we can get back to our orchestrator, which is the main TS and here we're gonna call const We're gonna retrieve the render from create render and We need to pass here the canvas and the resize of it. Okay, cool. We have an issue with the type, so type element. Oh, so this is type element. Well, we can easily fix it by going to the create render and changing this from HTML element to element so that it should be right.

[04:43] Yes. OK, so Let's just check in the browser if everything is working as expected. So let's run it and voila, we have our cube continue working as before. So the migration has worked. Now is the turn for the camera.