Raycaster results in a empty array in mapbox

I am using raycaster in mapbox. When I click on the object I get a empty raycaster.intersectObject . I am aware that it might not be a completely three.js issue, but any insight on why it may be happening can be very helpful to me. Here’s my code

HTML

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Add a 3D model</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />
    <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://unpkg.com/three@0.106.2/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader.js"></script>
<div id="map"></div>

<script src = "js/test.js"> </script>
</body>
</html>

Js

var longitude, latitude, diff, map, destLongitude, destLatitude, distFrmlast = 0;
var interval = 5000; // initial condition

var assetArr = [];



var modelOrigin, modelOrigin2;
var modelAltitude, modelAltitude2;
var modelRotate, modelRotate2;
var modelAsMercatorCoordinate, modelAsMercatorCoordinate2;
var modelTransform, modelTransform2;
var THREE;
var customLayer, customLayer2;
var previousDistance = 0, currentDistance = 0;
var clock = new THREE.Clock();
var mixer;
var renderer = null;






$(document).ready(function(){

 
  longitude = 77.123643;
  latitude =  28.707272;
  assetArr.push({id:"3d0", cord:{lng:longitude,lat:latitude}, url:'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf', scaleFactor:3, rad: 0.02, origCoord:{lng:longitude,lat:latitude}});
  showmap();


});





function showmap(callback){


    mapboxgl.accessToken = 'pk.eyJ1IjoibWFzaDEyIiwiYSI6ImNrNzBhMHc2aTFhMnkza3J2OG51azV6aW0ifQ.1FeBAzRjqkSQex-u-GiPyw';
    map = new mapboxgl.Map({

        style: 'mapbox://styles/mapbox/streets-v11',
        center: [longitude,latitude],
        zoom: 17.6,
        pitch: 95,
        bearing: -17.6,
        container: 'map',
        antialias: false,
       
       

    });


    var geojson = {
            'type': 'FeatureCollection',
            'features': [
              {
                'type': 'Feature',
                'geometry': {
                  'type': 'Point',
                  'coordinates': [longitude,latitude]
                },
                'properties': {
                  'title': 'Mapbox',
                  'description': 'Park Centra'
                }
              }
            ]
          };




    // The 'building' layer in the mapbox-streets vector source contains building-height
    // data from OpenStreetMap.
    map.on('zoom',function(){

       map.jumpTo({ center: [longitude,latitude] });

    });





    map.on('rotate',function(){
        document.getElementById('info').innerHTML = JSON.stringify(longitude +" : : "+latitude+" : : "+diff);
        map.jumpTo({center: [longitude,latitude]});
    });





    map.on('load', function() {
        // Insert the layer beneath any symbol layer.
        console.log("map loaded");
        var layers = map.getStyle().layers;
        console.log(layers);

        var labelLayerId;
        for (var i = 0; i < layers.length; i++) {
            if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
                labelLayerId = layers[i].id;
                break;
            }
        }




//        map.addLayer(customLayer, 'road-label');

        map.addLayer(
            {
                'id': '3d-buildings',
                'source': 'composite',
                'source-layer': 'building',
                'filter': ['==', 'extrude', 'true'],
                'type': 'fill-extrusion',
                'minzoom': 15,
                'paint': {
                    'fill-extrusion-color': '#aaa',

                    // use an 'interpolate' expression to add a smooth transition effect to the
                    // buildings as the user zooms in
                    'fill-extrusion-height': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        15,
                        0,
                        15.05,
                        ['get', 'height']
                    ],
                    'fill-extrusion-base': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        15,
                        0,
                        15.05,
                        ['get', 'min_height']
                    ],
                    'fill-extrusion-opacity': 0.6
                }
            },
            labelLayerId

        );
        
        
          model3(assetArr[0].id, assetArr[0].cord, assetArr[0].url , assetArr[0].scaleFactor);
          map.addLayer(customLayer3, 'waterway-label');
        



    });


}











var renderFlag = true,scene, camera;
function model3(Id, coordinates, gltfUrl , scaleFactor){


// parameters to ensure the model is georeferenced correctly on the map
//var modelOrigin = [77.052024, 28.459822];
 console.log("Values ",coordinates.lng, coordinates.lat);
 modelOrigin3 = [coordinates.lng, coordinates.lat];
 modelAltitude3 = 0;
 modelRotate3 = [Math.PI / 2, 0, 0];

 modelAsMercatorCoordinate3 = mapboxgl.MercatorCoordinate.fromLngLat(
    modelOrigin3,
    modelAltitude3
);



// transformation parameters to position, rotate and scale the 3D model onto the map
 modelTransform3 = {
    translateX: modelAsMercatorCoordinate3.x,
    translateY: modelAsMercatorCoordinate3.y,
    translateZ: modelAsMercatorCoordinate3.z,
    rotateX: modelRotate3[0],
    rotateY: modelRotate3[1],
    rotateZ: modelRotate3[2],
    /* Since our 3D model is in real world meters, a scale transform needs to be
    * applied since the CustomLayerInterface expects units in MercatorCoordinates.
    */
    scale: modelAsMercatorCoordinate3.meterInMercatorCoordinateUnits(),
    langlat: modelOrigin3

};

 THREE = window.THREE;

// configuration of the custom layer for a 3D model per the CustomLayerInterface
 customLayer3 = {
    id: Id,
    type: 'custom',
    renderingMode: '3d',
    onAdd: function (map, gl) {

        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        this.scene = new THREE.Scene();
        camera = this.camera;
        scene = this.scene;

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

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

        // use the three.js GLTF loader to add the 3D model to the three.js scene
        var loader = new THREE.GLTFLoader();

        loader.load(
            gltfUrl,
            function (gltf) {
                this.scene.add(gltf.scene);
            }.bind(this)
        );









        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;
        if(renderFlag == true){
         renderFlag = false;
         this.renderer.domElement.addEventListener( 'touchend', onClick, false );
        }
    },





    render: function (gl, matrix) {



        var rotationX = new THREE.Matrix4().makeRotationAxis(
            new THREE.Vector3(1, 0, 0),
            modelTransform3.rotateX

        );
        var rotationY = new THREE.Matrix4().makeRotationAxis(
            new THREE.Vector3(0, 1, 0),
            modelTransform3.rotateY

        );
        var rotationZ = new THREE.Matrix4().makeRotationAxis(
            new THREE.Vector3(0, 0, 1),
            modelTransform3.rotateZ

        );

        var m = new THREE.Matrix4().fromArray(matrix);
        var l = new THREE.Matrix4()
            .makeTranslation(
                modelTransform3.translateX,
                modelTransform3.translateY,
                modelTransform3.translateZ


            )
            .scale(
                new THREE.Vector3(
                    modelTransform3.scale*scaleFactor,
                    -modelTransform3.scale*scaleFactor,
                    modelTransform3.scale*scaleFactor


                )
            )
            .multiply(rotationX)
            .multiply(rotationY)
            .multiply(rotationZ);

        this.camera.projectionMatrix = m.multiply(l);
        this.renderer.state.reset();
        this.renderer.render(this.scene, this.camera);
        this.map.triggerRepaint();

     }
    }

  

};


var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2( Infinity, Infinity );



function onClick( event ) {

      	event.preventDefault();

     	mouse.x = ( event.changedTouches[0].clientX / window.innerWidth ) * 2 - 1;
      	mouse.y = - ( event.changedTouches[0].clientY / window.innerHeight ) * 2 + 1;


        

      	raycaster.setFromCamera( mouse, camera );

      	var intersects = raycaster.intersectObjects( scene.children, true );
        console.log("Here",intersects);
      	if ( intersects.length > 0 ) {
            alert("hi");
      		console.log( 'Intersection:', intersects[ 0 ].object.name == "");

      		}

      	}

use this solution