Always render mesh on top of another?

Questions
1

Hello,

I am trying a few things with THREE.js, and I’d like some help please.

I want to know how can I display a mesh always on top of another, even if it’s behind or going through the other.

For example here, I would like to see a blue square in front of a green square in front of the red one:
http://jsfiddle.net/p2nuga2f/

I thought renderOrder would work, but no luck.

Thanks.

1 Like
2

May I dare to UP this a bit?

Can somebody tell me if I misunderstood the use of RenderOrder?

Is there another parameter that might help me have some graphics always on top of another?

3

I’m not sure if it’s possible to use renderOrder in this way. It can be used to create invisible objects that occlude objects behind them, as you can see here.

Someone else may know for sure though.

1 Like
4

Hi looeee and thank you for your answer.
This seems like a very specific feature… and not what I need.
I have been looking in multiple render pass for my issue, but it requires to change a lot of things.

Is there really no other way?

5

On top of setting object.renderOrder you have to set material.depthTest to false on the relevant objects.

7 Likes
6

Perfect, this works just fine.
http://jsfiddle.net/p2nuga2f/1/

Thank you very much mrdoob.

I ended up doing this with multiple render passes, though, and it works fine too.
For those wondering how to do it:
http://jsfiddle.net/Horsetopus/33623mpv/

But its more complicated to setup (each render pass needs a specific scene and lights, etc etc), and I guess also less demanding so I guess I’ll use renderorder.

3 Likes