# ExtrudeGeometry custom Material

**URL:** <https://discourse.threejs.org/t/extrudegeometry-custom-material/16234>\
**Category:** Questions\
**Tags:** materials\
**Created:** [June 15, 2020, 3:32am UTC](https://discourse.threejs.org/t/extrudegeometry-custom-material/16234 "2020-06-15T03:32:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![lizhongkun](https://avatars.discourse-cdn.com/v4/letter/l/848f3c/32.png) [@lizhongkun](https://discourse.threejs.org/u/lizhongkun)\
**Post date:** [June 15, 2020, 3:32am UTC](https://discourse.threejs.org/t/extrudegeometry-custom-material/16234/1 "2020-06-15T03:32:24Z")

</div>

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](https://stackblitz.com/edit/angular-ivy-rzi2un?file=src%2Fapp%2Fapp.component.ts)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 15, 2020, 9:13am UTC](https://discourse.threejs.org/t/extrudegeometry-custom-material/16234/2 "2020-06-15T09:13:08Z")

</div>

If you just want to apply a image as a texture, you can use the following approach:

```auto
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](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](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.