Three.js Don't Strecht Mesh Texture (image) - Make It Cover Its Container

I have a container which i apply an image to using a three.js and mesh. That's how I apply my mesh to the scene: this.$els = { el: el, image: el.querySelector('.ch__image'

Solution 1:

Try it with the cover() function presented in this code snippet. The idea is to use the aspect of your container and of the image to achieve a similar result like background-size: cover.

var camera, scene, renderer;

var texture;

init();
animate();

functioninit() {

    camera = newTHREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = newTHREE.Scene();

    texture = newTHREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif', () => {
    
      cover( texture, window.innerWidth / window.innerHeight );
    
      scene.background = texture;
    
    } );
    texture.matrixAutoUpdate = false;

    renderer = newTHREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    window.addEventListener( 'resize', onWindowResize, false );

}

functiononWindowResize() {

  var aspect = window.innerWidth / window.innerHeight;

  camera.aspect = aspect;
  camera.updateProjectionMatrix();
  
  cover( texture, aspect );

  renderer.setSize( window.innerWidth, window.innerHeight );

}

functioncover( texture, aspect ) {

  var imageAspect = texture.image.width / texture.image.height;

  if ( aspect < imageAspect ) {

      texture.matrix.setUvTransform( 0, 0, aspect / imageAspect, 1, 0, 0.5, 0.5 );

  } else {

      texture.matrix.setUvTransform( 0, 0, 1, imageAspect / aspect, 0, 0.5, 0.5 );

  }

}

functionanimate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

body {
  margin: 0;
 }
 canvas {
  display: block;
 }

<scriptsrc="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

BTW: Instead of using window.innerWidth and window.innerHeight, use the dimensions of the container instead.

Solution 2:

I create a Canvas element, and edit the size of image by CanvasContext.drwaImage, then make a CanvasTexture. It works

import * asTHREEfrom'three';

functioncreateCoverTexture(
  url: string,
  width: number,
  height: number): Promise<THREE.CanvasTexture> {
  returnnewPromise((resolve, reject) => {
    const aspect = width / height;

    const image = newImage();
    image.crossOrigin = 'anonymous';

    image.onload = () => {
      const [sw, sh, left, top] =
        image.height < image.width / aspect
          ? [
              image.height * aspect,
              image.height,
              image.width / 2 - (image.height * aspect) / 2,
              0,
            ]
          : [
              image.width,
              image.width / aspect,
              0,
              image.height / 2 - image.width / aspect / 2,
            ];

      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = sw;
      canvas.height = sh;

      ctx?.drawImage(image, left, top, sw, sh, 0, 0, sw, sh);

      resolve(newTHREE.CanvasTexture(canvas));
    };

    image.onerror = reject;

    image.src = url;
  });
}