Fit the texture image to the mesh

Questions
1

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

image
image332×612 23.6 KB

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
image

2

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
3

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.

2 Likes
4

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

1 Like