How to apply different textures to the sides of an icosahedron?

Question

JavaScript

You need 20 textures to place on the sides. When passing a materials array with 20 elements to the Mesh, only one is used. With a cube it works fine - when passing an array of 6 elements, each side is painted in the appropriate material. What could be the problem with icosahedron (figure with 20 identical faces)?

Answer 1

https://codepen.io/strangerintheq/pen/abNrYdj
Here are the different geometries

const meshes = [
      new THREE.BoxGeometry(),
      new THREE.SphereGeometry(),
      new THREE.CylinderGeometry(),
      new THREE.ConeGeometry(),
      new THREE.IcosahedronGeometry(),
      new THREE.OctahedronGeometry(),
      new THREE.TorusGeometry(),
      new THREE.TorusKnotGeometry(),
      new THREE.DodecahedronGeometry(),
].map(geometry => new THREE.Mesh( geometry, materials ));

Each facegeometry has materialIndex, look at them:

console.log(meshes.map(mat => [
    mat.geometry.type, 
    mat.geometry.faces.map(face => face.materialIndex).join('')
]));

And we see that different indexes are not everywhere:

0: (2) ["BoxGeometry", "001122334455"]
1: (2) ["SphereGeometry", "00000000000000000000000000000000000000000000000000000000000000000000000000000000"]
2: (2) ["CylinderGeometry", "00000000000000001111111122222222"]
3: (2) ["ConeGeometry", "0000000022222222"]
4: (2) ["IcosahedronGeometry", "00000000000000000000"]
5: (2) ["OctahedronGeometry", "00000000"]
6: (2) ["TorusGeometry", "000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"]
7: (2) ["TorusKnotGeometry", "00000000000000000000000000000000000000000000000000…0000000000000000000000000000000000000000000000000"]
8: (2) ["DodecahedronGeometry", "000000000000000000000000000000000000"]