Fit the texture image to the mesh

I have created a plane with width and height, and then I loaded a image as the texture to fit the plane. but it is not working correctly. could you give some advice. thanks

export function drawImage(texture, width, height) {
  const linePath = [
    MAP_POLYGON_VECTOR.clone().set(-width / 2, height / 2),
    MAP_POLYGON_VECTOR.clone().set(width / 2, height / 2),
    MAP_POLYGON_VECTOR.clone().set(width / 2, -height / 2),
    MAP_POLYGON_VECTOR.clone().set(-width / 2, -height / 2),
    MAP_POLYGON_VECTOR.clone().set(-width / 2, height / 2),
  const material = new MeshBasicMaterial({
    map: texture,
    transparent: true,

  const geometry = new ExtrudeGeometry(new Shape(linePath), {
    steps: 5,
    depth: 0.1,
    bevelEnabled: false,

  const mesh = new Mesh(geometry, material);
  mesh.rotateX(Math.PI / 2);
  mesh.position.y = 0.04 - width / 100;

  return mesh;

the texture like below

for a css object-fit:cover implementation for threejs you can look into drei/Image, you can use the shader in your vanilla project.

or try it here to see if that’s what you want

1 Like

If you want to scale the image of the car to cover the whole rectangle, use offset and repeat properties of the texture. However, if the mesh is strictly rectangular, it would be better to use BoxGeometry instead of Shape+Extrude, then there will be no need to adjust the texture.


thank you, I think it’s the easiest way to solve it.

1 Like