Come posso inserire due trame diverse sulla parte anteriore e posteriore di un aereo?

Question

PRoblem: sto cercando di creare (solo per divertimento) una semplice carta da poker (con una carta posteriore e una carta frontale). Ho due immagini diverse, per il fronte e il retro. Ho facilmente creato una geometria piana con una singola trama per entrambi i lati, ma non so davvero come assegnare una trama per un lato e l'altra trama per l'altro lato ... ho provato questo (senza successo :():

var textureBack = new THREE.ImageUtils.loadTexture('images/cardBack.png'); 
var textureFront = new THREE.ImageUtils.loadTexture('images/cardFront.png');  

var material1 = new THREE.MeshBasicMaterial({ map: textureBack }); 
var material2 = new THREE.MeshBasicMaterial({ map: textureFront }); 

var geometry = new THREE.PlaneGeometry(90, 110, 1, 1);    
geometry.faces[ 0 ].materials.push(material1); 
geometry.faces[ 1 ].materials.push(material2); 

var card = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial()); 

alcun aiuto, si prega :)

Answer 1

È necessario inserire due geometrie piane back-to-back?.

Innanzitutto, creare una geometria per il fronte.

var geometry1 = new THREE.PlaneGeometry(90, 110, 1, 1); 

Ora creare un'altra geometria per la parte posteriore.

var geometry2 = new THREE.PlaneGeometry(90, 110, 1, 1); 

Spin it 180 gradi.

geometry2.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI)); 

Dopo aver caricato i materiali, creare le maglie, e aggiungerli come figli di un oggetto "carta".

// textures 
var textureFront = new THREE.ImageUtils.loadTexture('images/cardFront.png');  
var textureBack = new THREE.ImageUtils.loadTexture('images/cardBack.png'); 

// material 
var material1 = new THREE.MeshBasicMaterial({ color: 0xffffff, map: textureFront }); 
var material2 = new THREE.MeshBasicMaterial({ color: 0xffffff, map: textureBack }); 

// card 
card = new THREE.Object3D(); 
scene.add(card); 

// mesh 
mesh1 = new THREE.Mesh(geometry1, material1); 
card.add(mesh1); 
mesh2 = new THREE.Mesh(geometry2, material2); 
card.add(mesh2); 

Ti divertirai con questo se usi WebGLRenderer.

Fiddle: http://jsfiddle.net/mdAb7/11/

Aggiornato per Three.js r.69

Answer 2

era alla ricerca di una soluzione senza duplicare tutta la mia geometria.

Qui si va signore e signori ...

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

BOOM un fronte aereo Due per ya, il ciclo funziona anche con geometrie con più facce, replicando ogni faccia e applicando la texture Backside ad esso.

Divertiti!