Comment puis-je mettre deux textures différentes à l'avant et à l'arrière d'un avion ?

Question

Problème : j'essaie de créer (juste pour le plaisir) une carte de poker simple (avec un dos de carte et un recto de carte). J'ai deux images différentes, pour le dos et le recto. J'ai facilement créé une géométrie Plane avec une texture unique pour les deux faces, mais je ne sais vraiment pas comment assigner une texture pour une face et l'autre texture pour l'autre face... J'ai essayé ceci (sans succès :( ) :

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

de l'aide, s'il vous plaît :)

Answer 1

Je cherchais une solution sans dupliquer toute ma géométrie.

Voilà, mesdames et messieurs...

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 plan à deux faces pour vous, la boucle fonctionnera également avec des géométries ayant plus de faces, en répliquant chaque face et en lui appliquant la texture BackSide.

Profitez-en !

Answer 2

Vous devez placer deux géométries planes dos à dos.

Tout d'abord, créez une géométrie pour le front.

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

Créez maintenant une autre géométrie pour le dos.

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

Faites-le tourner à 180 degrés.

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

Après avoir chargé les matériaux, créez les maillages et ajoutez-les en tant qu'enfants d'un objet "carte".

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

Vous aurez plus de facilité à le faire si vous utilisez WebGLRenderer .

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

Mise à jour vers three.js r.69