How to replace the texture image of a specific face of a box?

Questions
1

So I have a box/mesh that has the same texture image on each face.

If I wanted to place the texture image on all 6 faces, I do this:

new THREE.TextureLoader().load('myimage.jpg', Callback);

function Callback(texture) {
        myCubeObject['material']['map'] = texture;
        myCubeObject['material']['map']['needsUpdate'] = true;
}

How would I specify a face index to replace and flip in vertically? Thank you.

2

@Superman –

It is possible to use an array of 6 materials instead of a single material. In such case each material corresponds to one of the 6 faces. Then, you can replace the .map of one of these materials. To flip a texture you can use .flipY property.

// loading textures
var texture = new THREE.TextureLoader().load( "main-texture.jpg" );
var texture2 = new THREE.TextureLoader().load( "second-texture.jpg" );

// defining a cube with 6 different materials (reusing the same texture)
var myCubeObject= new THREE.Mesh(
	new THREE.BoxGeometry( 2, 2, 2 ),
	[
		new THREE.MeshPhongMaterial( {map: texture} ),
		new THREE.MeshPhongMaterial( {map: texture} ),
		new THREE.MeshPhongMaterial( {map: texture} ),
		new THREE.MeshPhongMaterial( {map: texture} ),
		new THREE.MeshPhongMaterial( {map: texture} ),
		new THREE.MeshPhongMaterial( {map: texture} )
	]
);

// replacing the texture of face №0
myCubeObject.material[0].map = texture2;
myCubeObject.material[0].map.flipY = false;

– Pavel

1 Like
3

Oh, that did the trick. Genius! Thank you!

1 Like