The textures are not aligned in each face of custom geometry

Questions
1

I created a custom geometry (pentagon).
I just dont know how to apply textures on each face in a way that the textures are aligned properly. I searched for some code and able to write this:

squareGeometry.faceVertexUvs[0].push([
    new THREE.Vector2(x,y)
]);
squareGeometry.faceVertexUvs[0].push([
    new THREE.Vector2(x,y)
]);
squareGeometry.faceVertexUvs[0].push([
    new THREE.Vector2(x,y)
]);
squareGeometry.faceVertexUvs[0].push([
    new THREE.Vector2(x,y)
]);
squareGeometry.faceVertexUvs[0].push([
    new THREE.Vector2(x,y)
]);

THIS IS IMG : https://ibb.co/Bccys9M

This is the same texture as it is applied on the sides and roof.

Please help

2

Can you please share your entire pentagon creation as a live example (https://jsfiddle.net/f2Lommf5/)? In this way, it’s easier to debug the issue and inspect the texture coordinate generation.