Placing the images in the right position

[ahujasid]

I was following the Codrops tutorial for this and managed to get it to work, but I can't figure out how to place the images in the threejs canvas in the same place as the existing image in the DOM. Any tips on how to do that?

This is the code right now:

function createMeshForImage(img, texture) {
    let bounds = img.getBoundingClientRect();
    let aspect = window.innerWidth / window.innerHeight;
    let width = bounds.width / window.innerWidth * aspect;
    let height = bounds.height / window.innerHeight * aspect;
    let geometry = new THREE.PlaneGeometry(width, height);
    let material = new THREE.MeshBasicMaterial({ map: texture });
    let mesh = new THREE.Mesh(geometry, material);
    mesh.userData.bounds = img.getBoundingClientRect();

    let x = (bounds.left + bounds.width / 2 - window.innerWidth / 2) / window.innerWidth * aspect;
    let y = -(bounds.top + bounds.height / 2 - window.innerHeight / 2) / window.innerHeight * aspect;
    mesh.position.set(x, y, 0);

    return mesh;
}