How to add image on complex 3D model?

[HMTeam]

So i am new to 3D world and I am creating a website where we can upload a design (image) and that image should render on 3D model(car, van etc) and we can adjust the image and can change position through drag.
I saw many example online but all the examples are using single mesh and decal whereas i have a multimesh model.
This is my sandbox link: https://codesandbox.io/p/sandbox/image-alignment-via-decals-forked-jsd6ky?file=%2Fsrc%2FApp.js

[mjurczyk]

Either:

1. Use a geometry-based decal shrink-wrapped to the complex geometry, while keeping in mind that’ll be quite unpleasant to code, maintain, and in many cases would result in an absolute disaster due to low precision of shrinkwrapping.
2. Or, apply same decal to each geometry separately and just sync the positions (personally, that’s the way I’d go with.)
3. Or, merge the complex model into a single geometry and only then apply the decals.

[HMTeam]

is there any example online of option 2. I am new to threejs so it will be great if you have any.

[naonao_naonvl]

or you can try use this method, using CanvasTexture

Three.js + Fabric.js

This is just an extension of the other example. Time to time, people ask about such interactive things. For example, an editor of prints on t-shirts I haven’t worked with Fabric.js before, I just knew that it exists. Today I’ve tried to combine two libraries to create a dynamic and (kind of) editable texture. I hope, this topic will be a good start point for someone https://jsfiddle.net/prisoner849/rr1bsfsj/show/ [Three_and_Fabric]