title: Create cylinder between two gps a-frame entities with threejs
body: <p>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</p>
  <p>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.</p>
  <p>this is my last attempt:</p>
  <pre><code>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: &lt;latitude&gt;; longitude: &lt;longitude&gt;;');
  
              //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) =&gt; {
                  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: &lt;latitude&gt;; longitude: &lt;longitude&gt;;');
  
              //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) =&gt; {
                  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) =&gt; {
                  const boxPosition = new THREE.Vector3();
                  box.getWorldPosition(boxPosition);
                  return boxPosition;
              });
              line.geometry.setFromPoints(points);
      },
      });
  }
  </code></pre>