Sprite renders before Mesh despite renderOrder

I have two objects in the scene. One is Sprite and the other one Mesh.
The renderer’s sortObject is set to false.
The problem is that the Sprite object always renders behind the Mesh object and be obscure.
I’ve checked the order of drawing calls using SpectorJS and confirmed that Sprite indeed renders before Mesh.
I’ve tried setting renderOrder but it didn’t work.

How can I change the rendering order?

By the way I can’t

  • use multipass rendering
  • change the order of adding to the scene
  • move in z-axis
  • set renderer’s sortObject to true

I kind of solved the issue by sorting the scene.children to bring the mesh object front.

But I’d love to know some other better approach because this solution is bug prone.

Three.js uses sorting to order rendering based on renderOrder. If you need to handle sorting in a custom way you can use the setOpaqueSort or setTransparentSort functions to override the sorting behavior but it does require that sortObjects be set to true.