Having trouble with transparent mesh and sprite in the scene

Questions
,
1

Hi, I’m trying to place a sprite inside a transparent mesh that has the shape of a ring, but it seems to be behaving weirdly.

Without transparency, the ring seems to fit around the sprite just fine - https://prnt.sc/uh3cdk.
With transparency though, I can’t get it to fit - https://prnt.sc/uh3e7p

I’ve tried playing around with depthTest and depthWrite, also changing around the renderOrders, the model either completely ignores the sprite and places itself on top of it, or places itself around it and it’s transparency ignores the sprite completely and only reads from the background object. Can anyone at least point me in the right direction on how to go about fixing this? From what I’ve researched it’s a quirk of WebGL in general and there’s no one true way of going about it. Thank you!

2

Sprites are transparent by default. Can you please try to just set depthWrite to false?

In any event, consider to demonstrate the issue with a live example. This will make it easier to find a workaround/solution.

1 Like
3

Changing depthWrite to false - https://prnt.sc/uh5knb

And yes that sounds like a good idea, though I’m currently using react-three-fiber, I’ll look into rewriting it to plain three.js and post the example here if that’s ok.

4

Nevermind! The problem has been fixed - setting the alphaTest value low enough on the sprite worked.

1 Like