如何在A型框架中設置兩個不同圖像實體的兩側

Question

我想要一個圖像旋轉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> 

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