Applying Two Different Textures with Two Different Materials on the Same Mesh in Three.js/blender

Questions
, ,
1

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), and the artist needs to:

Capture.PNG
Capture.PNG1595×793 55.6 KB

  1. Apply base colors to each separate mesh.
  2. Paint over adjacent meshes in a continuous way without any visible seams or shifts.

I’ve encountered some issues:

  • When I join the meshes and unwrap them for continuous texture painting, there’s a slight shift where the meshes meet.

image
image1611×925 105 KB

  • After painting, I need to revert to separate entities while retaining the continuous design.

Here’s what I’ve tried so far:

  1. Joined all meshes and unwrapped them, but the textures shift where the meshes touch.
  2. I want to be able to color each separate entity first, then add designs that span multiple meshes. (this is where i am clueless about)

How can I achieve the following in Three.js:

  • Apply base colors to separate meshes.
  • Join the meshes temporarily for continuous texture painting without shifts.
  • Revert to separate meshes with the continuous design intact.

Any advice or solutions would be greatly appreciated!

2

Hi there.
Can you explain about image details ?
If you map texture at the shoes model, it’s good without slight shift.
Can you show me your code at the codesandbox ?
So I can check and help you
Kind regards.