Putting multiple images on a mesh in three.js

Questions
1

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

I am expecting results similar to the video.

2

You probably want Drei Decal : GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

3

here’s another one that has multiple images on a mesh, get rid of the debug prop and the helpers disappear

aligning decals with pivot controls

text decals

t-shirt configurator

4

@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?

5

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.

6

This is all code: Here

4
4759×444 47.3 KB

2
2731×357 8.82 KB

1
1761×363 9.67 KB

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.

7

Here is a simplified version of @drcmda shirt configurator that allows you to place logo at mouse click position.

Example : Decal Placement

image

To avoid z-fighting, I used,

 depthWrite: false,
 polygonOffset: true,
 polygonOffsetFactor: -1
3 Likes
8

Thanks you that’s exactly what I needed.