I am new to AR.js and Three.js and I am working with the examples from https://github.com/stemkoski/AR-Examples.

In the texture.html we have the following code for displaying an image of the earth on top of the marker

    markerRoot1 = new THREE.Group();
    scene.add(markerRoot1);
    let markerControls1 = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
        type: 'pattern', patternUrl: "data/hiro.patt",
    })

    let geometry1 = new THREE.PlaneBufferGeometry(1,3,  1,1);
    let loader = new THREE.TextureLoader();
    let texture = loader.load( 'images/earth.jpg', render );
    let material1 = new THREE.MeshBasicMaterial( { map: texture } );
    
    mesh1 = new THREE.Mesh( geometry1, material1 );
    mesh1.rotation.x = -Math.PI/2;
    
    markerRoot1.add( mesh1 );

I've changed the Y in PlaneBufferGeometry from 1 to 3 and scaled the image on Y axle. But the image is always horizontally and vertically centered on the marker. Is it possible to only horizontal center?