Three.js ExtrudeGeometry Texture

Textures are not shown on my extruded geometry. What am I doing wrong?

const shape = new THREE.Shape();
shape.autoClose = true;
shape.moveTo(walls[0].p1.x, -walls[0].p1.z);
shape.moveTo(walls[0].p2.x, -walls[0].p2.z);
for (var j = 1; j < walls.length; j++) {
    shape.lineTo(walls[j].p1.x, -walls[j].p1.z);
    shape.lineTo(walls[j].p2.x, -walls[j].p2.z);
var extrudeSettings = {
    steps: 1, depth: 5, bevelEnabled: false//, material: 0, extrudeMaterial: 1
const floor_material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
const loader = new THREE.TextureLoader();

const Texture = loader.load("assets/textures/grassbw.jpg", texture => { = texture;
    floor_material.needsUpdate = true;

Texture.wrapS = Texture.wrapT = THREE.RepeatWrapping;
Texture.repeat.set(60, 60);
Texture.rotation = Math.PI / 2;
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, floor_material);
mesh.receiveShadow = true;

6 thoughts on “Three.js ExtrudeGeometry Texture”

  1. Hi there, i read your blog occasionally and i own a
    similar one and i was just curious if you get
    a lot of spam comments? If so how do you reduce it, any plugin or anything you can recommend?
    I get so much lately it’s driving me crazy so any support is very much appreciated.


Leave a Comment