title: Three.js don't strecht mesh texture (image) - make it cover its container
body: <p>I have a container which i apply an image to using a three.js and mesh. </p>
  
  <p>That's how I apply my mesh to the scene:</p>
  
  <pre><code>this.$els = {
      el: el,
      image: el.querySelector('.ch__image') &lt;-- size of container image is being applied to
  };
  
  this.loader = new THREE.TextureLoader();
  this.image = this.loader.load(this.$els.image.dataset.src);
  this.sizes = new THREE.Vector2(0, 0);
  this.offset = new THREE.Vector2(0, 0);
  
  getSizes() {
      const { width, height, top, left } = this.$els.image.getBoundingClientRect();
  
      this.sizes.set(width, height);
      this.offset.set(left - window.innerWidth / 2 + width / 2, -top + window.innerHeight / 2 - height / 2)
  }
  
  createMesh() {
      this.geometry = new THREE.PlaneBufferGeometry(1, 1, 1, 1);
      this.material = new THREE.MeshBasicMaterial({
          map: this.image
      });
  
      this.mesh = new THREE.Mesh(this.geometry, this.material);
  
      this.mesh.position.set(this.offset.x, this.offset.y, 0);
      this.mesh.scale.set(this.sizes.x, this.sizes.y, 1);
  
      this.scene.add(this.mesh)
  }
  </code></pre>
  
  <p>Currently images/textures are being stretched to fit the container - how can I make the behave just like <code>object-fit: cover</code> or <code>background-size: cover</code>? </p>