'AR.js & Three.js position image on marker

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?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'AR.js & Three.js position image on marker

Sources

Related Questions