Fit image texture aspect ratio to size of plane

[TacoCombo]

Hey all,
I generate four planes through a loop and filling them with the corresponding texture from my image-folder. The problem is, that the images are stretched and don’t have the correct aspect ratio based on the width and height of the plane. I already googled and found some topics based on similar problems, tried out the code but none of them worked.

Does someone know how to fix the problem?

Here is my code so far:

const geometry = new THREE.PlaneBufferGeometry(1.8, 2.0);

  for (let i = 0; i < 4; i++) {
    const material = new THREE.MeshBasicMaterial({
      map: textureLoader.load(`/img/${i}.jpg`),
    });

    const img = new THREE.Mesh(geometry, material);
    img.position.set(1.3, (i - 1) * -2.3);

    scene.add(img);
  }

[Mugen87]

Does the following topic answer your question?

How to fit the texture to the plane

I’m trying to fit the texture to the plane, someone knows how to do it, I want to do the same result as background-size: cover in CSS

[TacoCombo]

I tried this approach before, don’t ask me why it didn’t work before, but now it did ;D
Huge thanks to you @Mugen87 !!

Just for the knowledge, why does running this part of your code work like this:

let texture = new THREE.TextureLoader().load(`/img/${i}.jpg`, () => {
      cover(texture, 1.8 / 2.0);
    });

But not if you run one after the other like this:

let texture = new THREE.TextureLoader().load(`/img/${i}.jpg`);
cover(texture, 1.8 / 2.0);

I think that was the problem before because if I do it like the second one, I get an error that I can’t get the width of something undefined.
Does it have something to do with the way that javascript handles some things asynchronous?

[TacoCombo]

Although, in comparison, the texture is still compressed on the vertical axis compared to the original picture, as you see here in the screenshots:

Left is the original, right is the texture on the website.

Here for example you can see clearly that the one on the right is more compressed than the original on the left.