I want to use pictures to make materials, and how to implement them in extrudegeometry
https://stackblitz.com/edit/angular-ivy-rzi2un?file=src%2Fapp%2Fapp.component.ts
If you just want to apply a image as a texture, you can use the following approach:
const loader = new TextureLoader();
const texture = loader.load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg' );
texture.wrapS = texture.wrapT = RepeatWrapping;
const material = new MeshLambertMaterial({ vertexColors: true, map: texture });
Live example: https://stackblitz.com/edit/angular-ivy-bhzkv1
In your code, it’s sufficient to just use a single material to achieve the same visual result. If you still want to apply multiple materials to extrude geometry, you can only configure two materials (one for the side and one for the lid faces).
BTW: The way how ExtrudeGeometry generates its texture coordinates is not optimal and can be improved (see https://github.com/mrdoob/three.js/issues/4994). Hence, you might want to model your geometry in a DCC tool like Blender, export it to glTF and then import it in your app if you need more control over texture coordinates.