Different textures for ExtrudeBufferGeometry

Hello everyone!
I’m trying to apply 3 different materials to ExtrudeBufferGeometry, one for face, one for back and one for side. After create a ExtrudeGeometry from shape I recompute MaterialIndex for each face and convert ExtrudeGemetry to ExtrudeBufferGeometry but have no result. I still have one material for face and back.

This is part of my code

var shape = new THREE.Shape();
shape.moveTo( -l/2, -w/2 );
shape.lineTo( -l/2, w/2 );
shape.lineTo( l/2, w/2-flap*Math.sin (Math.PI/180*angle) );
shape.lineTo( l/2, -w/2+flap*Math.sin (Math.PI/180*angle) );
shape.lineTo( -l/2, -w/2 );
 
var extrudeSettings = {
	steps: 1,
	depth: t,
     bevelEnabled: false,
     UVGenerator: THREE.ExtrudeGeometry.BoundingBoxUVGenerator
};

var FlapGeometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
FlapGeometry.computeFaceNormals();
var fn = new THREE.Vector3();

  for ( var i = 0; i < FlapGeometry.faces.length; i ++ ) {
    fn = FlapGeometry.faces[i].normal;
    if (fn.z==1) {FlapGeometry.faces[i].materiaIndex=0}
    if (fn.z==-1) {FlapGeometry.faces[i].materiaIndex=1}
    if (fn.z==0) {FlapGeometry.faces[i].materiaIndex=2}
  }

var bg = new THREE.BufferGeometry();
bg.fromGeometry(FlapGeometry);

Updated fiddle: https://jsfiddle.net/xmpbac0e/1/

You have actually a typo in your code. You have written materiaIndex although it should be materialIndex. Note the missing l.

1 Like

Thank you!
It was so stupid of me.