Design pattern with three.js and webpack

Question

I'm looking for a better way to organize my code with three.js and webpack than having everything in a single file (camera, meshes, lights, postprocessing, etc).

I thought I could use "manager modules" like a LightManager class, or a PostProcessingManager class, for instance. But then, these modules should be singletons, since I would only need one instance, right? Singleton is said to be a "bad" pattern, though (or you know, "it's not that it's bad, but in many cases you probably miss a better solution").

So I'm wondering what are my options? How do you guys organize your code?

Answer 1

Singletons are fine if you are sure you'll only ever need singletons, which is often true. If you have any doubt, use functions or classes instead.

I would start by going through your big file and looking for things that can be extracted, like if you are taking a lot of steps to set up a mesh, put that in its own module. Make functions to perform common actions on your scene and extract those to modules. By doing this you'll be able to work out a structure which suits your project.