javascript - 带有透明图像的 A-Frame 光标绘制顺序错误

Question

我有一个透明的图像光标，也就是相机的子图像。

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

我很难让它显示在其他透明图像(例如恐龙)之上。我看到奇怪的人工制品:

如果与 material="depthTest: false;" 一起使用，它会出现在其他透明图像的后面:

StackOverflow 上有很多关于 Three.js 透明度的 Material ，但没有一个与 A-Frame 有关。我确实尝试在各种对象上使用 renderOrder 属性，但没有成功。

我该如何解决这个问题？

相关代码笔:

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

Answer 1

事实证明，sortObjects 是 explicitly changed由 A-Frame 设置为 false，即使在 ThreeJS 中它默认为 true。我不确定为什么，因为这在任何地方都没有记录。

找出这个问题花了一段时间，但知道了这个解决方案非常简单:

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