Run function on textures on resize

Questions
, ,
1

I want to resize the canvas on window resize, and that works as expected. However, I’m running a function called cover() on the textures loaded onto a couple of planes. The function essentially mimicks the way background-size:cover; works in CSS and I run this when the texture gets loaded.

How do I reach the image property of the texture on window resize? Is that saved as a reference in the geometry object itself somehow or how do I reach it? Same goes for the X and Y size of the geometry, can I reach that and pass that to the cover() function when resizing?

The code I’m working with looks like this:

const CANVAS = document.getElementById("void-canvas")

const scene = new Scene();
var planes = []

var width = window.innerWidth;
var height = window.innerHeight;
var viewAngle = 45;
var nearClipping = 0.1;
var farClipping = 9999;
var camera = new PerspectiveCamera(viewAngle, width / height, nearClipping, farClipping);
var renderer = new WebGLRenderer({ canvas: CANVAS });
renderer.setSize(width, height);

var light = new PointLight(0xFFFFFF, 1, 19, 0.5);
light.position.x = 0;
light.position.y = 0;
light.position.z = -1;
scene.add(light);

Covers.forEach((cover) => {
    var plane = createPlane(cover.x, cover.y, cover.z, cover.type[0], cover.type[1], cover.art, cover.scale);
    planes.push(plane);
    scene.add(plane);
})

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

function createPlane(xPos = 0, yPos = 0, zPos = -20, xSize = 1, ySize = 1.5, coverArt, scale = 1) {
    const X_SIZE = xSize * scale;
    const Y_SIZE = ySize * scale;
    let geometry = new PlaneGeometry(X_SIZE, Y_SIZE);
    const texture = new TextureLoader().load(coverArt, () => {
        cover(texture, X_SIZE / Y_SIZE);
    });
    var planeMaterial = new MeshLambertMaterial({ map: texture, transparent: true, });
    var plane = new Mesh(geometry, planeMaterial);
    plane.receiveShadow = false;
    gsap.set(plane.position, { x: xPos })
    gsap.set(plane.position, { y: yPos })
    gsap.set(plane.position, { z: zPos })

    return plane;
}

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 random(min, max, randomNegative) { // min and max included 
    var randomNumber = Math.random() * (max - min + 1) + min;
    return Math.random() > 0.5 && randomNegative ? -randomNumber : randomNumber;
}

planes.forEach((plane, i) => {
    gsap.to(plane.position, { z: -1, duration: plane.position.z / -1, onComplete: repeat, ease: "linear" })
    function repeat() {
        gsap.set(plane.position, { z: -20 })
        gsap.to(plane.position, { z: -1, duration: plane.position.z / -1, onComplete: repeat, ease: "linear" })
    }
})

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    planes.forEach((plane) => {
        cover(plane.texture, plane.X_SIZE / plane.Y_SIZE); //this is what I want to be able to do in this function  
    })
    renderer.setSize( window.innerWidth, window.innerHeight );

}