How to Fit image on extruded area of ExtrudeGeometry

Questions
,
1

textures

Hi guys,
I’m new in three.js and im trying to solve this problem regarding plotting texture extruded part. Is there a way to merge all faces (illustrated on image above) of extruded region which was automatically generated when using extrudegeometry? I need to put a perfectly fit texture image from left to right of extruded region.
Thanks in advance.

code:

var shape = new THREE.Shape();

var width = 20;
var height = 20;

shape.moveTo(0, 0, 0);
shape.lineTo(width, 0, 0);
shape.quadraticCurveTo(width, height/5, width - width/5, height/5);
shape.lineTo(width/5, height/5, 0);
shape.quadraticCurveTo(0, height/5, 0, 0);

img[0].wrapS = img[0].wrapT = THREE.RepeatWrapping;
img[0].repeat.set(1/width, 1/height);

var extrudeSettings = { depth: width * 0.03, bevelEnabled: false };
var mushroomGeometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
mushroomGeometry.translate(-width/2, 0, 0);
var customShape = new THREE.Mesh(mushroomGeometry, [
        new THREE.MeshBasicMaterial({ map: img[0] }),
        new THREE.MeshBasicMaterial({ map: img[0] })
        ]);


scene.add(customShape);
2

You drawing is somewhat confusing since a face is nothing else than a single triangle. Hence, I don’t understand why your refer to the blue sections of your model as faces.

In general, it’s easier to use a tool like Blender in order to adjust your geometry data (e.g. texture coordinates) than with a procedural approach.

3

I updated the drawing, sorry for the wrong use of word “faces”. Btw, I can’t use blender since it should be dynamic. I think my only option is to study and re-calculate its texture coordinates.

4

Hi mate, did you manage to merge texture on all faces of extruded mesh? can you share a code example?