I'm new to ar.js i found aframe and threejs as a potential solution for my problem. I have 2 points (latitude, longitude) and i want to create a cylinder between them in Augmented Reality

So first of all i used aframe to create both points with 'gps-entity-place'. then i tried to create the cylinder but no success. threejs does not recognize the gps coordination i think. I doubted that maybe my solution to create a cylinder between start-end point is wrong, so i tried to create a simple line between them but also no sucess. I added a threejs mesh inside every gps entity so maybe it will recognize the points but agian no sucess.

this is my last attempt:

public createLine() { 
    AFRAME.registerComponent('scene-foo', { 
    init() { 
        //CREATE GPS ENTITY 
        const gpsEntity: any = document.createElement('a-entity');
        gpsEntity.setAttribute('id', 'gpsEntity');
        gpsEntity.setAttribute('gps-entity-place', 'latitude: <latitude>; longitude: <longitude>;');

            //ADD GPS ENTITY TO THE SCENE
            this.el.sceneEl.appendChild(gpsEntity);

         //CREATE BOX IN THREE JS
            const THEBox = new THREE.Mesh(
                new THREE.BoxBufferGeometry(1, 1, 1),
                new THREE.MeshStandardMaterial({ color: 0x23996c })
            );

            //ADD BOX TO THE GPS ENTITY
        gpsEntity.addEventListener('loaded', (e) => {
                gpsEntity.setObject3D('mesh', THEBox);
            });

            //***************** SECOND GPS ENTITY ********************
            //CREATE GPS ENTITY
            const gpsEntity2: any = document.createElement('a-entity');
        gpsEntity2.setAttribute('id', 'gpsEntity2');
            gpsEntity2.setAttribute('gps-entity-place', 'latitude: <latitude>; longitude: <longitude>;');

            //ADD GPS ENTITY TO THE SCENE
            this.el.sceneEl.appendChild(gpsEntity2);

            //CREATE BOX IN THREE JS
            const THEBox2 = new THREE.Mesh(
                new THREE.BoxBufferGeometry(1, 1, 1),
                new THREE.MeshStandardMaterial({ color: 0xeb4034 })
            );

            //ADD BOX TO THE GPS ENTITY
            gpsEntity2.addEventListener('loaded', (e) => {
                gpsEntity2.setObject3D('mesh2', THEBox2);
            });

            //CREATE THE PONTS ARRAY TO CREATE THE LINE
            const boxes = [THEBox, THEBox2];
        
            const line = new THREE.Line(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({ color: 0xffff99 }));
            this.el.object3D.add(line);

            //here to link between boxes
            const points = boxes.map((box) => {
                const boxPosition = new THREE.Vector3();
                box.getWorldPosition(boxPosition);
                return boxPosition;
            });
            line.geometry.setFromPoints(points);
    },
    });
}