如何在 A-Frame 中设置实体两侧的两个不同图像答案

【问题标题】：How do I set two different images both sides of an entity in A-Frame如何在 A-Frame 中设置实体两侧的两个不同图像
【发布时间】：2017-05-22 13:21:54
【问题描述】：

我想要一个旋转 180 度并在任一侧显示图像的图像。

您可以设置正面和背面，所以我想知道是否有办法在两侧设置图像。

  <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>

【问题讨论】：

标签： aframe webvr

【解决方案1】：

您可以创建两个平面并将它们背靠背放置。比如：

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

或者为平面纹理组件做一些双面材质。这是来自How can I put two different textures on the front and back of a plane? 的原始three.js 代码：

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)));

【讨论】：

完美。就是这样。谢谢！