为何css3dsprite的renderOrder仅相机远离时生效？如何让黄色标签始终覆盖红色

问题说明 #

我分别为两个CSS3DSprite实例设置了renderOrder字段为1和2，但该属性仅在相机与这两个实例保持一定距离时才生效。

场景效果展示：

我希望黄色标签能够始终覆盖红色标签。

可行解决方案 #

由于CSS3DSprite基于DOM元素渲染，Three.js的renderOrder受DOM层叠上下文限制，无法单独保证层级始终正确，可尝试以下方法：

• 直接控制DOM的z-index：给黄色标签对应的DOM元素设置更高的z-index值，比如黄色标签DOM加样式style="z-index: 999;"，红色标签设为z-index: 1;，通过DOM层级强制黄色标签始终覆盖。
• 手动调整DOM渲染顺序：每次渲染完成后，将黄色标签的DOM元素移到红色标签DOM的前面，利用DOM流式渲染的顺序优先级确保覆盖关系。
• 微调z轴位置：将黄色标签的z轴位置设置为比红色标签更靠近相机（数值更小），结合CSS3DRenderer的sortObjects属性，让渲染器基于空间位置自动处理层级。

内容的提问来源于stack exchange，提问作者LIU XIAOCHUAN