¿Cómo puedo poner dos texturas diferentes en la parte frontal y posterior de un avión?

Question

PRoblem: estoy tratando de crear (solo por diversión) una simple tarjeta de póquer (con una tarjeta hacia atrás y un frente de tarjeta). Tengo dos imágenes diferentes, para la parte posterior y delantera. Creé fácilmente una geometría plana con una sola textura para ambos lados, pero realmente no sé cómo asignar una textura para un lado y la otra textura para el otro lado ... intenté esto (sin éxito :():

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

cualquier ayuda, por favor :)

Answer 1

Es necesario colocar dos geometrías planas de back-to-back?.

Primero, cree una geometría para el frente.

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

Ahora cree otra geometría para la parte posterior.

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

Girar 180 grados.

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

Después de cargar los materiales, cree las mallas y añádalas como elementos secundarios de un objeto "tarjeta".

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

Tendrá un tiempo más fácil con esto si usa WebGLRenderer.

violín: http://jsfiddle.net/mdAb7/11/

Actualizado a Three.js R.69

Answer 2

estaba buscando una solución sin duplicar todo mi geometría.

Aquí tienes damas y caballeros ...

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 avión se enfrentó a dos para ti, el bucle también trabajará con geometrías con más caras, replicando cada cara y aplicar la textura del lado posterior a la misma.

¡Disfrútalo!