A-Frame-Cursor mit transparentem Bild hat eine falsche Zeichenreihenfolge

Question

Ich habe einen transparenten Bildcursor, dh ein Bild, das ein Kind der Kamera ist.

<a-camera> 
    <a-image position="0 0 -1" width="0.2" height="0.2" transparent="true" src="image.png"> 
</a-camera> 

Ich habe eine harte Zeit, es über anderen transparenten Bildern (wie dem Dinosaurier) erscheinen zu lassen. Ich sehe ungerade Artefakte:

Wenn mit material="depthTest: false;" verwendet erscheint es hinter anderen transparenten Bilder:

Es gibt eine Menge von Material auf Stackoverflow über Transparenz mit Three.js, aber nichts davon gehört zu A-Frame. Ich habe versucht, mit der renderOrder Eigenschaft auf verschiedenen Objekten ohne Glück zu spielen.

Wie kann ich das lösen?

Relevante codepen:

https://codepen.io/OpherV/pen/oBqgBa?editors=1000

Answer 1

So wie sich herausstellt, sortObjects ist explicitly changed auf false von A-Frame, obwohl auch in ThreeJS es standardmäßig wahr. Ich bin mir nicht sicher warum, denn das ist nirgendwo dokumentiert.

Es dauerte eine Weile, dies herauszufinden, aber diese die Lösung zu wissen, ist ganz einfach:

document.querySelector('a-scene').renderer.sortObjects = true;