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 => {
    floor_material.map = 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);
geometry.computeFaceNormals();
const mesh = new THREE.Mesh(geometry, floor_material);
mesh.receiveShadow = true;
mesh.updateMatrix();

14 thoughts on “Three.js ExtrudeGeometry Texture”

Leave a Comment