I am currently working on some products that need to be customized in three.js. I am having a problem with putting the images on a mesh. First I wanted to put them as textures, but it didnt work, then I tried to use a div for putting all images in and just place that div as texture on mesh. But I didnt succeed, maybe I was doing something wrong there is not enough docs about CSS3D and CSS3DSprite. Watching some videos I saw that it is possible to do, so I want to find the solution. Any answer would be welcome!
What would be the way to set two or more images on a mesh? How to put the images if we know that if we put them as textures the color of mesh will disappear?
There is one expample of putting images on div and putting that div on the mesh: Here
I am using React.js and I am not so skillful with three.js, any answer about react-three-fiber, react-fiber/drei would be helpful
@seanwasere@drcmda It’s working, thanks. The problem I am facing now is the position. I am trying to attach the decal to the mesh, so it will stick to the surface. I saw a mesh attribute, but I am not sure how to use it since it’s not working when I add ref to a mesh and assign that ref to a Decal. Can someone explain to me how to use it?
stick to the surface? i think you might want to sketch up visually what you want to do. or better yet post a codesandbox. a decal is a cutout of the original geometry overlaid on the original. it will always move along and stick to where it’s been placed.
The problem is, when you manually set positions you have to be precise and it often does not get good results changing positions dinamically, which I want to do here. So I thought to use mesh property to attach the decal to the surface.