Hi! I have a react three fiber project, and I can’t figure out how to put a transparent .png on an imported .glb model while maintaining the the model’s original texture properties, like allowing it to reflect light, shadows, etc. I really just want to somehow place this image of the face on the model. The model will be animated, so staticly placing it in front of the model won’t work. The user will be able to dynamically switch the face .png, so it needs to be able to be done on the fly. There will be many models, so I can’t just place the face on in something like blender. Feel free to reach out with any questions! Thanks for looking!
Two ways immediately come to mind - The “brute” way, where you render the same model on top, but with the transparent face texture on it (might have to make the scale slightly larger to avoid clipping); and the more efficient way where you create a shader which takes two texture inputs for the base diffuse color and the face, and draws both.
For either method, the base model would need to be UV unwrapped properly (I took a quick looks and the strawberry doesn’t seem to be)
2 Likes
One interesting solution is using decal geometry - projection. Will be 2 meshes.
https://threejs.org/examples/?q=decal#webgl_decals
1 Like
I don’t know if I made it correctly in terms or React, but the model of strawberry has UV unwrap messed as hell.
UV:
did you manage to solve it?
as @leoncvlt suggested the shader approach is probably the nicest.
as said also, UVs are messy, maybe the model you use has specific UV wrapping which needs to be tuned in shader
here is the shader based result:
1 Like
Forgot to put the link to the forked project
Thanks for the response. Is this something you’d be interested in implementing based on my offer? Additionally, I’m going to have lots of these models. Would I need the modeler to fix the UV map on all of them for this to work?
Oh awesome! Just curious, why is the face red now? Also, if it’s easier we can message on discord, my name is noobhunter67#2941
Because I wished it to be so 
Use textCol.rgb instead of vec3(1, 0, 0) to have it as in the texture (black).
1 Like
Awesome, similar to Prisoner849. Curious, why is the face upside down, and where is the top of the strawberry?
Gotcha lol cool. Any preference on platform to DM? Just have a few questions on performance here
This topic was automatically closed after 30 days. New replies are no longer allowed.