Three.js ensures that the mesh texture does not stretch, instead it covers its container perfectly

Question

Three.js ensures that the mesh texture does not stretch, instead it covers its container perfectly

I have a container where I apply an image using three.js and mesh.

Here's how I add my mesh to the scene:

this.$els = {
    el: el,
    image: el.querySelector('.ch__image') <-- size of container image is 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)
}

Currently, images/textures are being stretched to fit the container. How can I make them behave like object-fit: cover or background-size: cover?

javascript css three.js

Answer 1

Answer №1

Experiment with the cover() function demonstrated in this code snippet. The concept is to leverage both the aspect ratio of your container and the image to replicate a similar effect as background-size: cover.

var camera, scene, renderer;

var texture;

init();
animate();

function init() {

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

    scene = new THREE.Scene();

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

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

}

function onWindowResize() {

  var aspect = window.innerWidth / window.innerHeight;

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

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

}

function cover( 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 );

  }

}

function animate() {

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

}

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

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77031f051212374759464642">[email protected]</a>/build/three.js"></script>

By the way: Instead of relying on window.innerWidth and window.innerHeight, consider using the dimensions of the container instead.

Answer 2

Experiment with the cover() function demonstrated in this code snippet. The concept is to leverage both the aspect ratio of your container and the image to replicate a similar effect as background-size: cover.

var camera, scene, renderer;

var texture;

init();
animate();

function init() {

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

    scene = new THREE.Scene();

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

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

}

function onWindowResize() {

  var aspect = window.innerWidth / window.innerHeight;

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

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

}

function cover( 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 );

  }

}

function animate() {

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

}

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

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77031f051212374759464642">[email protected]</a>/build/three.js"></script>

By the way: Instead of relying on window.innerWidth and window.innerHeight, consider using the dimensions of the container instead.

Answer 3

Answer №2

I utilize a Canvas element to adjust the size of an image using CanvasContext.drawImage, then proceed to create a CanvasTexture. The process is successful.

import * as THREE from 'three';

function generateTexture(
  url: string,
  width: number,
  height: number
): Promise<THREE.CanvasTexture> {
  return new Promise((resolve, reject) => {
    const aspect = width / height;

    const image = new Image();
    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(new THREE.CanvasTexture(canvas));
    };

    image.onerror = reject;

    image.src = url;
  });
}

Answer 4

I utilize a Canvas element to adjust the size of an image using CanvasContext.drawImage, then proceed to create a CanvasTexture. The process is successful.

import * as THREE from 'three';

function generateTexture(
  url: string,
  width: number,
  height: number
): Promise<THREE.CanvasTexture> {
  return new Promise((resolve, reject) => {
    const aspect = width / height;

    const image = new Image();
    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(new THREE.CanvasTexture(canvas));
    };

    image.onerror = reject;

    image.src = url;
  });
}

Three.js ensures that the mesh texture does not stretch, instead it covers its container perfectly

Answer №1

Answer №2

Similar questions

What is the best way to access the functions within an object?

What's the most efficient way to iterate through this Array and display its contents in HTML?

Discover all CSS elements with Python Selenium and replace them all

Seeking a sleeker approach to composing various components with shared functions

Adjust the CSS of a dynamically generated jQuery checkbox button in real-time

The number input component that is meant to be reusable is experiencing functionality issues within the NUXT framework

Passing Variables from Node JS to Pug Template's HTML and JavaScript Sections

How to ensure the right size for your sections in HTML5

How to avoid property sharing in Angular recursive components

Utilize JavaScript to create a toggle menu feature that can target multiple variables with just one click function

The React Bit Dev module is showing a 404 error

Tips for aligning an HTML button with a hyperlink

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

Utilize CSS properties to pass as arguments to a JavaScript function

AngularJS ngAnimate triggering prematurely

Floating Action Button is not properly attached to its parent container

Eliminate certain inline styles using jQuery

How to show a placeholder in a select input using ReactJS

Angular 2 Mouseover Functionality

Ways to automatically adjust the margins of my HTML body page