UV mapping of an image for a custom shape

Questions
, ,
1

Screenshot from 2022-12-07 12-34-01
hi guys,
I’m trying to add an image texture on a custom shape that I created and don’t exactly know how to do uv mapping for a custom shape.I have the coordinates of the image texture and I’m planning to do uv mapping using those coordinates.Is there a way or any reference to do it?

I tried doing a normal uv mapping that is used for a rectangle and got this:

Screenshot from 2022-12-07 13-02-02
Screenshot from 2022-12-07 13-02-02427×560 160 KB

code:

var  B = coreObject.getB(), L = coreObject.getL(), shape = new THREE.Shape(), l = 30 * Math.tan(Math.PI / 4),extrudeSettings, geometry, mesh;

extrudeSettings = {
    depth: 0,
    bevelEnabled: false
};

shape.lineTo(L, 0);
shape.lineTo(L, B / 2 - l - 75);
shape.lineTo(L - 30, B / 2 - 75);
shape.lineTo(L - 30, B / 2 + 75);
shape.lineTo(L, B / 2 + l + 75);
shape.lineTo(L, B);
shape.lineTo(0, B);
shape.lineTo(0, 0);

geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
rotationMatrix.makeRotationX(Math.PI / 2);
geometry.applyMatrix4(rotationMatrix);
var positions = geometry.getAttribute("position").array;
var uvs = [];
// coordinates of img texture
var xStart = texture.xStart, xEnd = texture.xEnd, yStart = texture.yStart, yEnd = texture.yEnd, mapping = [], l = 30 * Math.tan(Math.PI / 4);

mapping = [
    new THREE.Vector2(xEnd, yStart),
    new THREE.Vector2(xEnd, yEnd),
    new THREE.Vector2(xStart, yEnd),
    new THREE.Vector2(xStart, yStart)
];

uvs.push(mapping[0].x, mapping[0].y);
uvs.push(mapping[2].x, mapping[2].y);
uvs.push(mapping[1].x, mapping[1].y);
uvs.push(mapping[0].x, mapping[0].y);
uvs.push(mapping[2].x, mapping[2].y);
uvs.push(mapping[3].x, mapping[3].y);
geometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array(uvs), 2));

mesh = new THREE.Mesh(geometry, imageMaterial);
2

The easiest way is to make this shape in a program like Blender and do uv unwrapping there.

Your code is incomplete, if you make a live version of it on jsfiddle or codepen, then it will be easier to check what is wrong with the uv values.