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 geometry with a single texture for both sides, but i really don't know how to assign a texture for a side and the other texture for the other side... i tried this (without success :( ):

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

any help, please? :)

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 geometry with a single texture for both sides, but i really don't know how to assign a texture for a side and the other texture for the other side... i tried this (without success :( ):

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

any help, please? :)

• javascript
• textures
• three.js

• A somewhat leaner solution below, took a long time so I thought I would share! – mattdlockyer Commented Jul 11, 2013 at 20:17

2 Answers 2

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!

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( new THREE.Matrix4().makeRotationY( Math.PI ) );

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

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

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

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

Updated to three.js r.69