A-frame building scene "inside cube"

Question

I've just wanted to create a visualisation using A-frame library, in which user is "inside a cube" and on sides there are canvas images embedded. I've started preparing the scene using a-plane. That is what I've achived. http://codepen.io/LuoXiahong/pen/LRNJNb

    <a-scene>
      <a-assets>
      </a-assets>
      <!-- Basic plane. -->
      <a-plane color="#ff0000" height="2" width="2" position="0 0 0" rotation="-90 0 0"></a-plane>
      <!-- Front-->
      <a-plane color="#00ff00" height="2" width="2" position="0 1 -1" rotation="0 0 90"></a-plane>
      <!--Back - does not display-->
      <a-plane color="#0000ff" height="2" width="2" position="0 1 1" rotation="0 0 90"></a-plane>
      <!-- Left-->
      <a-plane color="#ffff00" height="2" width="2" position="-1 1 0" rotation="0 90 0"></a-plane>
      <!-- Right-->
      <a-plane color="#ff00ff" height="2" width="2" position="1 1 0" rotation="0 -90 0"></a-plane>
      <!--Top plane - does not display -->
      <a-plane color="#00ffff" height="2" width="2" position="0 2 0" rotation="-90 0 0"></a-plane>
    </a-scene>

I have problem with displaying top and back side of my cube. Is there anyone, who could help me?

Don McCurdy Don McCurdy · Accepted Answer · 2016-09-15T13:59:14

By default in THREE.js (and therefore A-Frame), faces only render one side or the other. Your top plane is just rotated the wrong way, so it's only visible from the top. You can change its rotation to 90 0 0 to fix that, or add side="back" or side="double" to your <a-plane /> to change which side(s) of the plane are shown. More details here.

A-frame building scene "inside cube"

1 Answers