mapbox with threejs draw line

mapboxgl.accessToken =
  "pk.eyJ1IjoiaG9yc2VmYWNlZCIsImEiOiJjazFzbmVtZm8wZTN4M2JvMHM4NmhjOHF3In0.pt5o3NcTrnXjEt41vnm2oA";
var map = (window.map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v10",
  zoom: 18,
  center: [148.9819, -35.3981],
  pitch: 60,
  antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
}));

// parameters to ensure the model is georeferenced correctly on the map
var start = [148.9819, -35.39847];
var startAltitude = 0;
var startCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(start, startAltitude);
console.log(startCoordinate);
var end = [148.9800, -35.39800];
var endAltitude = 1000;
var endCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(end, endAltitude);
console.log('end is ');
console.log(endCoordinate);
  /* Since our 3D model is in real world meters, a scale transform needs to be
   * applied since the CustomLayerInterface expects units in MercatorCoordinates.
   */
//var scale = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()

var THREE = window.THREE;

var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(startCoordinate.x, startCoordinate.y, startCoordinate.z));
geometry.vertices.push(new THREE.Vector3(endCoordinate.x, endCoordinate.y, endCoordinate.z));

var line = new THREE.Line(geometry, material);

// configuration of the custom layer for a 3D model per the CustomLayerInterface
var customLayer = {
  id: "3d-model",
  type: "custom",
  renderingMode: "3d",
  onAdd: function(map, gl) {
    this.camera = new THREE.Camera();
    this.scene = new THREE.Scene();

    // create two three.js lights to illuminate the model
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(0, -70, 100).normalize();
    this.scene.add(directionalLight);

    var directionalLight2 = new THREE.DirectionalLight(0xffffff);
    directionalLight2.position.set(0, 70, 100).normalize();
    this.scene.add(directionalLight2);

    this.scene.add(line);
    
    this.map = map;

    // use the Mapbox GL JS map canvas for three.js
    this.renderer = new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl,
      antialias: true
    });

    this.renderer.autoClear = false;
    
  },
  render: function(gl, matrix) {
    var m = new THREE.Matrix4().fromArray(matrix);
    this.camera.projectionMatrix = m;
    this.renderer.state.reset();
    this.renderer.render(this.scene, this.camera);
    this.map.triggerRepaint();
  }
};

map.on("style.load", function() {
  map.addLayer(customLayer, "waterway-label");
});