How to always render UI on top?

[ROBYER1]

How would you go about rendering UI on top of everything else? E.g. a menu that shows above the game or hotspots that always render on top of the product?

[felixmariotto]

Hi, three-mesh-ui components are composed with three.js Object3D, so you can use their renderOrder property normally. I made a fiddle to help you out: https://jsfiddle.net/felixmariotto/g4je73rx/48/

[marwie]

Hello Felix! Thanks for looking into this. Disabling renderOrder still renders on top because of depthTest = false tho. Seems like renderOrder doesnt have an effect here?

Did you change the mesh ui material api in the latest version? We're currently on 6.3.2 which has multiple different member names for the materials (I found backgroundMaterial, fontMaterial and also just material)

[swingingtom]

Hello Felix! Thanks for looking into this. Disabling renderOrder still renders on top because of depthTest = false tho. Seems like renderOrder doesnt have an effect here?

The following might be outdated
Just a guess, but it might comes from the fact that three-mesh-ui materials ( font & frame ) are set to be transparent:true. AFAIK transparent materials are always rendered after opaques one. To confirm that theory in your working case, set the transparent properties of non three-mesh-ui object material to true too.

[ROBYER1]

Thanks! You went above and beyond to make a working example, I'll be having a play with this tomorrow in my own project from the attached fiddle 😎