How do I set two different images both sides of an entity in A-Frame

Question

I want to have a image that spins in place 180 degrees and shows the image on either side.

You can set the front and back side, so I was wondering if there was a way to set an image on both sides.

  <a-entity material="src:template.png; side: front" mixin="slide" class="intersectable" position="2 1 -3">
    <a-animation begin="click" attribute="rotation" dur="2000" from="0 0 0" to="0 180 0" fill="forwards"></a-animation>
  </a-entity>

Answer 1

You can either create two planes and put them back to back. Something like:

<a-entity>
    <a-entity geometry material="side: back"></a-entity>
    a-entity geometry material="side: front"></a-entity>
    <a-animation></a-animation>
  </a-entity>

Or do something like a double-sided material for plane texture component. Here's the raw three.js code from How can I put two different textures on the front and back of a plane?:

var materials = [new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}),
                 new THREE.MeshBasicMaterial({map: textureBack, side: THREE.BackSide})];

var geometry = new THREE.PlaneGeometry(width, height);

for (var i = 0, len = geometry.faces.length; i < len; i++) {
    var face = geometry.faces[i].clone();
    face.materialIndex = 1;
    geometry.faces.push(face);
    geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
}

scene.add(new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)));