three.jsでスプライトのrenderOrderが正しく反映されないとき

解決法

順序を指定したい"全てのmaterial"に同じtransparentを設定する

• Material.transparent = true

Object3D.renderOrder

This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently

同じZに複数のスプライトを描画する場合、materialにdepthTest=falseを設定する

• Material.depthTest = false

Material.depthTest

注意
Rendererでdepth=falseを指定していてもこの設定は必要。ブラウザによって挙動が異なる。

• Firefox: MaterialでdepthTest:falseを設定していなくても正しく表示される
• Chrome/Edge: MaterialでdepthTest:falseを設定していないと正しく表示されない