带有透明图像的 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;" 一起使用，它会出现在其他透明图像的后面：

Whosebug 上有很多关于 Three.js 透明度的 material，但没有一个与 A-Frame 有关。我确实尝试在各种对象上玩 renderOrder 属性 但没有运气。

我该如何解决这个问题？

相关代码笔：

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

Answer 1

事实证明，sortObjects 被 A-Frame explicitly changed 变为假，即使在 ThreeJS 中它默认为真。我不确定为什么，因为这在任何地方都没有记录。

花了一些时间才找到这个，但知道了这个解决方案就很简单了：

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