How Can I Put Two Different Textures On The Front And Back Of A Plane?

PRoblem: i'm trying to create (just for fun) a simple poker card (with a card back and a card front). I have two different images, for back and front. I easily created a Plane geom

Solution 1:

Was searching for solution without duplicating all my geometry.

Here you go ladies and gentlemen...

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 a Two Faced Plane for ya, the loop will also work with geometries with more faces, replicating each face and applying the BackSide texture to it.

Enjoy!

Solution 2:

You need to place two plane geometries back-to-back.

First, create a geometry for the front.

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

Now create another geometry for the back.

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

Spin it 180 degrees.

geometry2.applyMatrix( newTHREE.Matrix4().makeRotationY( Math.PI ) );

After you load the materials, create the meshes, and add them as children of a "card" object.

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

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

You'll have an easier time with this if you use WebGLRenderer.

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

Updated to three.js r.69