aframewebvr

How to get a both side colored plane in A-Frame


When I create an a-plane and assign an attribute color="red", the color is applied to one side only. I added rotation animation to the plane and the back of the plane is white: fiddle.

What would be the method to get a plane colored from both sides? Should I create 2 planes of same color and then rotate one so that they are back to back and to the user looks like a single plane?


Solution

  • There is a material property called side. If you set it to double, the material will be applied both to front and back

    <a-entity material="side: double"></a-entity>
    

    snippet:

    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <a-scene>
      <a-plane position="0 0 -4" width="4" height="4" 
               color="#7BC8A4" material="side: double"
               animation="property: rotation; to: 360 0 0; loop: true; dur: 2500">
      </a-plane>
    </a-scene>