Search code examples
aframe

A-Frame nested plane element not shown correctly

I have a a-plane nested in another a-plane. 

<a-plane width="10" height="5" color="#FFFFFF">
  <a-plane width="10" color="#000080"></a-plane>
</a-plane>

But the result looks like this enter image description here I also tried it with a nested a-image and had the same result. I also tried to remove the inner plane and add it outer and to the same position. But I've got always the same result.

A-Frame Version: 0.9.2

Solution

  • You've placed two planes in an identical position. The renderer does not know which one should be in front of another (since they are planes and their transforms are identical) - and hence you experience z-fighting.

    You need to position one of the planes so that they won't overlap:

    <a-plane>
  <a-plane position='0 0 -0.001'>
  </a-plane>
</a-plane>