Mapbox GL ThreeJS Overlay - Display two buildings and draw lines between them

Two models can be loaded like this below 

 var loader = new THREE.GLTFLoader();

          loader.load(

            // "https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf",

            "./models/building.glb",

            function (gltf) {

              gltf.scene.position.set(70, 70, 0);

              this.scene.add(gltf.scene);

              mesh1 = gltf.scene;

              updateLine();

            }.bind(this)

          );

          loader.load(

            "./models/building.glb",

            function (gltf) {

              this.scene.add(gltf.scene);

              mesh2 = gltf.scene;

              updateLine();

            }.bind(this)

          );

Once loaded, the line can be drawn like this. this is a very basic example so it uses variables to know if the 

Objects are loaded. 

Now to draw the line, below is the code segment 

function updateLine() {

            console.log(" -- updateLine ENTRY --", mesh1 + ", " + mesh2);

            if (mesh1 && mesh2) {

              const material = new THREE.LineBasicMaterial({

                color: 0x0000ff,

              });

              const points = [];

              let mesh1LinePos = mesh1.position;

              //   mesh1LinePos.z = mesh1LinePos.y + 20;

              points.push(mesh1LinePos);

              let mesh2LinePos = mesh2.position;

              //   mesh2LinePos.z = mesh2LinePos.y + 20;

              points.push(mesh2LinePos);

              const geometry = new THREE.BufferGeometry().setFromPoints(points);

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

              sceneRef.add(line);

            }

          }

References:

https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/