I am working on a Three.js project where I have a mesh object with a texture applied. The texture is a PNG file with dimensions 64×64.

Problem:
When the dimensions of the mesh object change, the texture gets stretched in height and width, which distorts its appearance. I want the texture to maintain its original dimensions (64×64) regardless of the mesh’s size.

When the mesh is 64×64

When the mesh is 16×07 (or anything other than NxN)

I have tried looking into texture properties and material settings in Three.js but couldn’t find a way to keep the texture dimensions fixed while scaling the mesh.

How can I prevent the texture from stretching and keep it at its original 64×64 size when the mesh dimensions change in Three.js?

Here is how the meshObject & material is created
Material Creation

function _createMaterial(url: string): THREE.MeshBasicMaterial {
    let material = new THREE.MeshBasicMaterial();

    this.loader.load(url, (texture) => {
        texture.magFilter = THREE.NearestFilter;
        texture.minFilter = THREE.LinearMipMapLinearFilter;
        material.setValues({ map: texture });
    });
    return material;
}

MeshObject Creation

this._meshObject = new Utils3.myTHREE.Mesh(geometry, material);