How to use the aframe/src.THREE.Line function in aframe

if (facing === 'y') {
        vertices.push(Math.cos(i / 32 * Math.PI) * radius, 0, Math.sin(i / 32 * Math.PI) * radius);
      }
      if (facing === 'z') {
        vertices.push(Math.sin(i / 32 * Math.PI) * radius, Math.cos(i / 32 * Math.PI) * radius, 0);
      }
    }

    geometry.addAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    return geometry;
  };

  this.handleGizmos = {

    X: [
      [ new THREE.Line(new CircleGeometry(1, 'x', 0.5), new GizmoLineMaterial({ color: 0xff0000 })) ],
    ],

    Y: [
      [ new THREE.Line(new CircleGeometry(1, 'y', 0.5), new GizmoLineMaterial({ color: 0x00ff00 })) ],
    ],

    Z: [
      [ new THREE.Line(new CircleGeometry(1, 'z', 0.5), new GizmoLineMaterial({ color: 0x0000ff })) ],
    ],

    E: [
      [ new THREE.Line(new CircleGeometry(1.25, 'z', 1), new GizmoLineMaterial({ color: 0xcccc00 })) ],
    ],

    XYZE: [
      [ new THREE.Line(new CircleGeometry(1, 'z', 1), new GizmoLineMaterial({ color: 0x787878 })) ],

const lineYGeometry = new THREE.BufferGeometry();
  lineYGeometry.addAttribute('position', new THREE.Float32BufferAttribute([ 0, 0, 0, 0, 1, 0 ], 3));

  const lineZGeometry = new THREE.BufferGeometry();
  lineZGeometry.addAttribute('position', new THREE.Float32BufferAttribute([ 0, 0, 0, 0, 0, 1 ], 3));

  this.handleGizmos = {

    X: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0xff0000 })), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
      [ new THREE.Line(lineXGeometry, new GizmoLineMaterial({ color: 0xff0000 })) ],
    ],

    Y: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x00ff00 })), [ 0, 0.5, 0 ] ],
      [ new THREE.Line(lineYGeometry, new GizmoLineMaterial({ color: 0x00ff00 })) ],
    ],

    Z: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x0000ff })), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ],
      [ new THREE.Line(lineZGeometry, new GizmoLineMaterial({ color: 0x0000ff })) ],
    ],

    XYZ: [
      [ new THREE.Mesh(new THREE.OctahedronGeometry(0.1, 0), new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })), [ 0, 0, 0 ], [ 0, 0, 0 ] ],
    ],

    XY: [
      [ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0xffff00, opacity: 0.25 })), [ 0.15, 0.15, 0 ] ],
    ],

    YZ: [

this.handleGizmos = {

    X: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0xff0000 })), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
      [ new THREE.Line(lineXGeometry, new GizmoLineMaterial({ color: 0xff0000 })) ],
    ],

    Y: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x00ff00 })), [ 0, 0.5, 0 ] ],
      [ new THREE.Line(lineYGeometry, new GizmoLineMaterial({ color: 0x00ff00 })) ],
    ],

    Z: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x0000ff })), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ],
      [ new THREE.Line(lineZGeometry, new GizmoLineMaterial({ color: 0x0000ff })) ],
    ],

    XYZ: [
      [ new THREE.Mesh(new THREE.BoxBufferGeometry(0.125, 0.125, 0.125), new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })) ],
    ],

  };

  this.pickerGizmos = {

    X: [
      [ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
    ],

    Y: [
      [ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0, 0.6, 0 ] ],

arrowGeometry.merge(mesh.geometry, mesh.matrix);

  const lineXGeometry = new THREE.BufferGeometry();
  lineXGeometry.addAttribute('position', new THREE.Float32BufferAttribute([ 0, 0, 0, 1, 0, 0 ], 3));

  const lineYGeometry = new THREE.BufferGeometry();
  lineYGeometry.addAttribute('position', new THREE.Float32BufferAttribute([ 0, 0, 0, 0, 1, 0 ], 3));

  const lineZGeometry = new THREE.BufferGeometry();
  lineZGeometry.addAttribute('position', new THREE.Float32BufferAttribute([ 0, 0, 0, 0, 0, 1 ], 3));

  this.handleGizmos = {

    X: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0xff0000 })), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
      [ new THREE.Line(lineXGeometry, new GizmoLineMaterial({ color: 0xff0000 })) ],
    ],

    Y: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x00ff00 })), [ 0, 0.5, 0 ] ],
      [ new THREE.Line(lineYGeometry, new GizmoLineMaterial({ color: 0x00ff00 })) ],
    ],

    Z: [
      [ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x0000ff })), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ],
      [ new THREE.Line(lineZGeometry, new GizmoLineMaterial({ color: 0x0000ff })) ],
    ],

    XYZ: [
      [ new THREE.Mesh(new THREE.OctahedronGeometry(0.1, 0), new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })), [ 0, 0, 0 ], [ 0, 0, 0 ] ],
    ],