Best Approach for Managing Modifications in a Desk Configurator on Three.js

I am developing a furniture configurator using Three.js and need advice from experts on how to handle a specific situation.

The project involves a desk with many possible modifications (e.g., different leg styles, tops, and accessories). I want to enable users to toggle these modifications through a menu.

My question is:
Would it be better to create separate .glb files for each modification and load them dynamically, or should I include all modifications in a single .glb file and manage their visibility based on the menu selections?

I’m concerned about performance, ease of maintenance, and scalability for future modifications.

Any insights or best practices would be greatly appreciated!

Thank you!

Hi.
I think both approaches have the pros and cons.
Case that separate .glb files
Pros:
Performance: Loading only the selected components when needed can reduce the initial loading time, as users are not downloading all possible modifications at once.
Memory Efficiency: Only the necessary assets are loaded into memory, which can help with performance on lower-end devices.
Modularity: Individual components can be updated or changed without impacting the whole model, simplifying maintenance.
Cons:
Latency: Each time a user toggles a modification, there might be a loading period while the new .glb file is fetched.
Complexity: You would need to manage multiple files and their states effectively, which can complicate the code and user experience.
Increased Requests: Each toggle could require a separate network request, which may slow down the user experience.
I hope helpful for you.

This is the way.
You can use Custom Properties panel in Blender for giving each component a unique name, and use that for managing mesh.visible = false in a dedicated function.

When properly done, this is going to save you requests, latency and user experience friction