# \[PAID\] HELP! $300 to help me programmatically put a transparent .png on an imported .glb model! Codesandbox ready! React-three-fiber

**URL:** <https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984>\
**Category:** Jobs\
**Tags:** gltf-loader, textures, materials, shaders\
**Created:** [January 23, 2022, 1:25am UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984 "2022-01-23T01:25:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![typical](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@typical](https://discourse.threejs.org/u/typical)\
**Post date:** [January 23, 2022, 1:25am UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/1 "2022-01-23T01:25:58Z")

</div>

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!

 ![example](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/4/74adc5ef7a8a3920cc6b32d0bbadef826181c903.png)

> **[face edit (forked) - CodeSandbox](https://codesandbox.io/s/face-edit-forked-d13h0?file=%2Fsrc%2FApp.js)**
>
> Shows how to form self-contained components with their own state and user interaction.

---

<div class="post-metadata">

**Author:** ![leoncvlt](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/leoncvlt/32/23715_2.png) [@leoncvlt](https://discourse.threejs.org/u/leoncvlt)\
**Post date:** [January 23, 2022, 8:58am UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/2 "2022-01-23T08:58:29Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [January 23, 2022, 9:58am UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/3 "2022-01-23T09:58:46Z")

</div>

One interesting solution is using decal geometry - projection. Will be 2 meshes.  
[https://threejs.org/examples/?q=decal#webgl\_decals](https://threejs.org/examples/?q=decal#webgl_decals)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 23, 2022, 11:16am UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/4 "2022-01-23T11:16:04Z")

</div>

I don’t know if I made it correctly in terms or React, but the model of strawberry has UV unwrap messed as hell.

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/e/5eb74aecc633833240406ed44e10505ce269a16f.png)

UV:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/c/4c4ef5ed93087a72257483b0aee3d10e0a4432a8.png)

---

<div class="post-metadata">

**Author:** ![Etienne](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/etienne/32/17680_2.png) [@Etienne](https://discourse.threejs.org/u/Etienne)\
**Post date:** [January 23, 2022, 2:26pm UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/5 "2022-01-23T14:26:42Z")

</div>

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:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/2/d275c0b19210ae070dbfa6dc2915eed9944ad790.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 23, 2022, 5:45pm UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/6 "2022-01-23T17:45:03Z")

</div>

Forgot to put the link to the [forked project](https://codesandbox.io/s/face-edit-forked-6x2yy?file=/src/Model.js)

---

<div class="post-metadata">

**Author:** ![typical](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@typical](https://discourse.threejs.org/u/typical)\
**Post date:** [January 23, 2022, 5:45pm UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/7 "2022-01-23T17:45:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![typical](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@typical](https://discourse.threejs.org/u/typical)\
**Post date:** [January 23, 2022, 5:49pm UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/8 "2022-01-23T17:49:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 23, 2022, 5:52pm UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/9 "2022-01-23T17:52:52Z")

</div>

Because I wished it to be so 🙂  
Use `textCol.rgb` instead of `vec3(1, 0, 0)` to have it as in the texture (black).

---

<div class="post-metadata">

**Author:** ![typical](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@typical](https://discourse.threejs.org/u/typical)\
**Post date:** [January 23, 2022, 5:53pm UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/10 "2022-01-23T17:53:24Z")

</div>

Awesome, similar to Prisoner849. Curious, why is the face upside down, and where is the top of the strawberry?

---

<div class="post-metadata">

**Author:** ![typical](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@typical](https://discourse.threejs.org/u/typical)\
**Post date:** [January 23, 2022, 6:00pm UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/11 "2022-01-23T18:00:29Z")

</div>

Gotcha lol cool. Any preference on platform to DM? Just have a few questions on performance here

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c74c5243388bbfa21a39c3e824ddba702a623dec.png) [@system](https://discourse.threejs.org/u/system)\
**Post date:** [February 22, 2022, 1:26am UTC](https://discourse.threejs.org/t/paid-help-300-to-help-me-programmatically-put-a-transparent-png-on-an-imported-glb-model-codesandbox-ready-react-three-fiber/33984/12 "2022-02-22T01:26:13Z")

</div>

Closed on February 22, 2022, 1:26am UTC

This topic was automatically closed after 30 days. New replies are no longer allowed.