# Adding an image over multiple meshes

**URL:** <https://discourse.threejs.org/t/adding-an-image-over-multiple-meshes/68981>\
**Category:** Questions\
**Tags:** uv, materials, shaders\
**Created:** [August 5, 2024, 4:55pm UTC](https://discourse.threejs.org/t/adding-an-image-over-multiple-meshes/68981 "2024-08-05T16:55:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lokesh\_Shanmuga](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lokesh_shanmuga/32/50105_2.png) [@Lokesh\_Shanmuga](https://discourse.threejs.org/u/Lokesh_Shanmuga)\
**Post date:** [August 5, 2024, 4:55pm UTC](https://discourse.threejs.org/t/adding-an-image-over-multiple-meshes/68981/1 "2024-08-05T16:55:06Z")

</div>

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).

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/c/9caa9c149e855231da2a686719429cff18925b3f.jpeg)

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/8/681ccd6f91dc2a8688832d39b141b332dd0099c8.jpeg)

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?

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [August 6, 2024, 6:44am UTC](https://discourse.threejs.org/t/adding-an-image-over-multiple-meshes/68981/2 "2024-08-06T06:44:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 6, 2024, 9:07am UTC](https://discourse.threejs.org/t/adding-an-image-over-multiple-meshes/68981/3 "2024-08-06T09:07:14Z")

</div>

decals: [https://codesandbox.io/p/sandbox/iridescent-decals-qvb1vk](https://codesandbox.io/p/sandbox/iridescent-decals-qvb1vk)

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

shoe configurator [Shoe configurator - CodeSandbox](https://codesandbox.io/s/qxjoj)