Adding an image over multiple meshes

0

I am working on a project where the user can cusotmise his/her shoes. I want them to color the individual parts of the shoe which is easy to build (each part of the shoe is its own mesh).

secondly, I want them to add any character or picture on their shoes like shown below.

I’ve planned to upload image onto a canvas using fabric js and use the canvas as material to apply the image on the shoes.

how do I seamlessly apply the image across multiple meshes(multiple parts)? How do I apply image to different meshes seamlessly?

I don’t know if this is helpful, but:

  1. Are you creating the shoe in Blender and saving it as a gltf/glb file? If so, are each of the parts that you want to re-color separate parts? When loading a Blender object, it is possible to parse the various parts and apply different textures to them (I believe each one is treated as a separate mesh). So I expect that there must be a way to parse a Blender object once it has loaded and apply different colors/textures. Maybe you have already solved that problem.
  2. In three.js, you can add decals to a mesh. There is an example in the three.js examples. But I am not 100% sure if you can apply a decal across multiple meshes.
  3. One work-around might be to add a singe mesh to your Blender object that combines all of the parts (perhaps making it slightly larger so there is no interference) and texture it with a transparent texture that you can modify. (You can add textures to Blender objects when you are loading them.) I believe that there are three.js examples that show how you can modify textures within your program.

Just some ideas.

decals: https://codesandbox.io/p/sandbox/iridescent-decals-qvb1vk

moving decals interactively https://codesandbox.io/p/sandbox/image-alignment-via-decals-88mttv

shoe configurator Shoe configurator - CodeSandbox

1 Like