ExtrudeGeometry Texture

Questions
,
1

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();
2

Well, there can be an approximately endless amount of reasons. :’)

(1) Check if the texture is loaded at all (in devtools under Networking panel.)
(2) Try using the loader directly in the material definition to avoid updating manually:

new MeshPhongMaterial({
  map: loader.load("assets/textures/grassbw.jpg")
});

(3) If that doesn’t work, could you please share a codepen or a live preview?

3

Texture is loaded.
I tried to use the loader but texture isn’t shown.

Quite difficult to extract the code for a fiddle…

It seems to be a texture mapping problem. Some color is applied from texture but one can’t see a structure. Playing with repeat does not help.

4

ok, my repeat was to big. Changed it to 0…005 and I can see the texture now.

1 Like