Refactor a messy Three.js main.ts into scalable, maintainable code using factory composition.
Learn to build modular subsystems with cleanup methods and create a reusable resize observer utility that decouples the camera and renderer, turning your main file into a clean orchestrator for 3D scenes.
Go from zero to a modular Three.js app with Vite and TypeScript.
[00:00] Right now everything lives in the main TS. That works well for a demo, but it doesn't scale well and it will bring up problems in the future, especially for maintenance. Right now we have what I call a spaghetti code. All the imperative instructions in one file to create our 3D scene. The pattern that we are going to use is called factory composition.
[00:27] So instead of exporting singleton instances, each subsystem becomes a function that creates what it needs and returns both the object and a disposed method for cleanup. So instead of having everything in the main, we're gonna create factory functions that are gonna return us the camera, the renderer and even the debug graphic interface with TwigPane. The cool thing about this is that the main TS is going to become just an orchestrator and it's going to be pretty clean. Another advantage of this approach is that things like resizing the window, we can create a utility to observe the window resizing and apply it to several objects like the camera and the renderer without duplicating code. Since we are going to use the resize of server I think it's good that we create it first.
[01:22] So the problem with adding a resize listener directly on the camera or the render code is that they're a couple. So the camera will need to know about the renderer and be service. So instead of that, let's create a shared utility So I'm gonna go here. I'm gonna create a folder called utils and Inside of utils, Let's create a file that is called resizeofserver.ts. Inside here, we're gonna create a factory function.
[01:59] We can call it createResizeOfServer. And basically we need to save all the callbacks that we're gonna register for the different parts, like the camera and I guess the render. So it's gonna be something like const callbacks and we can use a map here. So we're gonna do new set, but probably it's a good idea to type it so we need a type for interface so we need a type for what we are gonna return which is basically the size is gonna be the window width and the windows height. So both of them are gonna be a number, and then we need an interface for the resize callback, essentially.
[02:48] So we are gonna call it just that, resize callback. And this is gonna be a function that has the size. So it's gonna use the one, the interface that we created here. And this is what we're gonna pass to the generic here. So resize callback, resize callback.
[03:11] Okay, now we have the callbacks, but we need to add event listeners for the resizing. So we're gonna do window add event listener, and similar to what we did here, that we took this, actually, I'm going to just comment this part. So we are going to listen to the resize and then we are gonna call the callbacks instead of doing the code here. So in the addEventListener, we're gonna do resize. We're gonna return something like this.
[03:49] And probably we need to return all the callbacks for each so we're gonna iterate through them and then the callback here and we're gonna call the callback and we need the function to return the size. So we can create one here, so getSize, probably a good name. So equal, And with this one, we are going to return an object, which is essentially this object right here. So the window's inner width and the window inner height. Something like this.
[04:39] I don't know if we need to type it though. Well, let's type it like this and then in this callback, we're gonna call the getSize. Okay, so everything is fine type-wise. So we need to return this getSize because we're gonna need it to initialize our parameters to get the initial window innerWidth and innerHeight but we also need their onResize callback so we're gonna do const onResize so whenever we resize and this is going to be as parameter, the resize callback. Okay, and we have it like this, and it's basically adding or registering the callback into the callback set.
[05:36] It's gonna be like this. We pass a callback and we should return something like this callback delete. While we do this, this is a common pattern, but basically we are returning the unsubscribe method here. We're gonna see in a moment how it works. Okay, so we do this, we don't call getSize here, that's a mistake.
[06:07] So we return getSize on resize. Okay, let's save it and then let's go here and maybe below the canvas let's do the resize of server of server okay and Let's create the resize of server like this. So, server and equal to create resize of server. We need to import it from here and now we're ready to use it
