Three.js different texture material on each face

Question

I have a BufferGeometry object and I want to be able to assign a different texture to each face.

In my example here: https://jsfiddle.net/2ay716mz/ (working example)

I have setup a cube (using custom BufferGeometry not BoxGeometry seeing as I need other objects that are not cubes).

I have passed an array of materials to the mesh, one side is a texture and the other sides are all different colors.

This all works correctly...however if I try to put the texture material on any face group , other than the group[0] and group[1], then it doesn't work and just shows a color instead.

See in this example where I have set the texture to be the third material; it no longer works: https://jsfiddle.net/2ay716mz/1/

How can I solve this? Or is this a bug and should be reported to three.js github?

Marquizzo Marquizzo · Accepted Answer · 2021-09-09T20:13:51

It works fine on my end. You just have to assign a new material to each texture you want to use:

const texLoader = new THREE.TextureLoader();

const texURL1 = 'https://upload.wikimedia.org/wikipedia/commons/9/93/Gfp-jagged-rock-texture.jpg';
const texURL2 = 'https://threejs.org/examples/textures/patterns/circuit_pattern.png';
const texURL3 = 'https://threejs.org/examples/textures/decal/decal-normal.jpg';
const texURL4 = 'https://threejs.org/examples/models/gltf/LeePerrySmith/Map-COL.jpg';
const texURL5 = 'https://threejs.org/examples/models/gltf/LeePerrySmith/Map-SPEC.jpg';
const texURL6 = 'https://threejs.org/examples/textures/cube/pisa/px.png';

const mat1 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL1)});
const mat2 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL2)});
const mat3 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL3)});
const mat4 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL4)});
const mat5 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL5)});
const mat6 = new THREE.MeshBasicMaterial({color: 0xffffff, map: texLoader.load(texURL6)});

var material = [
    mat1,
    mat2,
    mat3,
    mat4,
    mat5,
    mat6,
];

Click here for live demo

Three.js different texture material on each face

1 Answers