Jak umieścić dwie różne tekstury z przodu iz tyłu samolotu?

Question

PRoblem: staram się stworzyć (tylko dla zabawy) prostą kartę pokerową (z kartą i frontem karty). Mam dwa różne obrazy, z tyłu iz przodu. Z łatwością utworzyłem geometrię Płaszczyzny z pojedynczą teksturą dla obu stron, ale naprawdę nie wiem, jak przypisać teksturę dla boku, a inną teksturę dla drugiej strony ... Próbowałem tego (bez powodzenia :():

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

jakiejkolwiek pomocy, proszę :)

Answer 1

trzeba umieścić dwie geometrie samolot z powrotem do tyłu?.

Najpierw utwórz geometrię z przodu.

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

Teraz utwórz kolejną geometrię z tyłu.

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

Obróć o 180 stopni.

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

Po załadowaniu materiałów utwórz siatki i dodaj je jako elementy potomne obiektu "karty".

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

Będziesz mieć łatwiejszy czas z tym jeśli użyjesz WebGLRenderer.

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

Aktualizacja do Three.js r.69

Answer 2

szukał rozwiązania nie powielając całe geometrię.

Proszę bardzo panie i panowie ...

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 Two Faced samolot dla ciebie, pętla będzie również współpracować z geometrii z większej powierzchni, replikacji każdą twarz i stosowania teksturę Backside do niego.

Ciesz się!