What's the best way to add contrasting textures to both sides of an airplane?

Question

What's the best way to add contrasting textures to both sides of an airplane?

Issue: I am attempting to create a simple poker card (just for fun) with two different images for the back and front. I have successfully created a Plane geometry with a single texture for both sides, but I am struggling to assign a texture for each side separately.

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

Can anyone provide assistance with this? Thank you! :)

javascript textures three.js

Answer 1

Answer №1

Was in search of a solution that didn't involve duplicating all my geometry.

Well, here it is for all the ladies and gentlemen out there...

const materials = [new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}),
                 new THREE.MeshBasicMaterial({map: textureBack, side: THREE.BackSide})];

const geometry = new THREE.PlaneGeometry(width, height);

for (let i = 0; i < geometry.faces.length; i++) {
    const 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 created just like that. This loop will even work with geometries containing multiple faces, replicating each face and applying the BackSide texture accordingly.

Hope you enjoy this trick!

Answer 2

Was in search of a solution that didn't involve duplicating all my geometry.

Well, here it is for all the ladies and gentlemen out there...

const materials = [new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}),
                 new THREE.MeshBasicMaterial({map: textureBack, side: THREE.BackSide})];

const geometry = new THREE.PlaneGeometry(width, height);

for (let i = 0; i < geometry.faces.length; i++) {
    const 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 created just like that. This loop will even work with geometries containing multiple faces, replicating each face and applying the BackSide texture accordingly.

Hope you enjoy this trick!

Answer 3

Answer №2

To create a 3D effect, you'll need to place two plane geometries facing each other.

Start by defining a geometry for the front side.

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

Next, create another geometry for the back side.

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

Rotate the second geometry by 180 degrees to position it correctly.

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

Once you load the necessary textures and materials, assemble the meshes and attach them as children of a "card" container.

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

If you're using WebGLRenderer, the process will be smoother.

Try it out on this Fiddle link: http://jsfiddle.net/mdAb7/11/

This code is updated for three.js version r.69

Answer 4

To create a 3D effect, you'll need to place two plane geometries facing each other.

Start by defining a geometry for the front side.

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

Next, create another geometry for the back side.

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

Rotate the second geometry by 180 degrees to position it correctly.

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

Once you load the necessary textures and materials, assemble the meshes and attach them as children of a "card" container.

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

If you're using WebGLRenderer, the process will be smoother.

Try it out on this Fiddle link: http://jsfiddle.net/mdAb7/11/

This code is updated for three.js version r.69

What's the best way to add contrasting textures to both sides of an airplane?

Answer №1

Answer №2

Similar questions

Fetching data from an ajax call and populating a data table

What is the best way to transmit error messages from the server to the client?

Tips for configuring Webstorm to automatically change double quotes to single quotes when reformatting source code

What is the best way to transfer data from an Ajax function to a controller action?

The loading bar animation doesn't begin at a blank slate

Ways to avoid scrolling on a fixed element

Finding the orientation of a Rubik's Cube may seem like a daunting task at

Locating numerous words within a given string

The Vue component with the export default directive could not be located

Changing the value of a variable in React Native does not reflect in the child component when passed as props

What is the best way to create a form with two inputs that redirects me to a different page based on the inputs chosen?

Changing Image to Different File Type Using Angular

What causes a React Native wrapped component to re-render consistently?

The focus functionality in Angular seems to be malfunctioning

Searching for matching strings in jQuery and eliminating the parent div element

Using ng-value does not trigger any updates to the Ng-model

I'm having trouble grasping the concept of this asynchronous behavior

Load jQuery to display the Bootstrap modal.ORUse jQuery to load and

What is the best way to create rotational movement for an object in a-frame?

Having difficulty positioning the dropdown above the other elements in the body