I am working on a project where the artist can customize shoes for clients. The shoes are composed of separate meshes (e.g., parts 1, 2, 3, 4),
1,2,3,4 are considered as seperate mesh as they can be colored individually

and the artist needs to:
-Apply base colors to each separate mesh.
-put image over adjacent meshes in a continuous way without any visible seams or shifts.

Here’s what I’ve tried so far:

Joined all meshes and unwrapped them, but the textures shift where the meshes touch.
I want to be able to color each separate entity first, then add designs that span multiple meshes.

UV map becomes weird when i join the meshes and unwrap in blender

How can I achieve the following in Three.js:

1)Apply base colors to separate meshes.
2)Join the meshes temporarily for continuous texture painting without shifts.
3)Revert to separate meshes with the continuous design intact.
Any advice or solutions would be greatly appreciated!