具有透明图像的A帧光标具有错误的绘制顺序

Question

I have a transparent image cursor, that is, an image that is a child of the camera.

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

I'm having a tough time getting it to appear above other transparent images (such as the dinosaur). I'm seeing odd artifacts:

If used with material="depthTest: false;" it appears behind other transparent images:

There's a lot of material on StackOverflow about transparency with Three.js, but non of it pertains to A-Frame. I did try playing with the renderOrder property on various objects with no luck.

How can I solve this?

Relevant codepen:

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

Answer 1

So as it turns out, sortObjects is explicitly changed to false by A-Frame, even though in ThreeJS it's true by default. I'm not sure why, as this isn't documented anywhere.

It took a while to find this out but knowing this the solution is quite simple:

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