Problem rotating a 3D object with the along Y axis

Hello everyone, Sorry due to some confusion I posted this question twice. But this post is the actual question I am using threejs with webview and currently I am trying to rotate a 3D Object according to the angle of Device Orientation. I have Device Orientation angle alright with deviceorientationabsolute in js. I have recorded a video(Please excuse the noise,mute if possible).

Video showing the problem

I have shown the device orientation angle on top of the screen in the Video as “OrientationAngle”.
But there are one Problem I am facing i.e.

The Rotation is not exactly around the center of the object,but instead the right side of 3D object becomes the center of the rotation.

My deviceorientationabsolute listener is constantly running and inside it I update rotation in this line
`if(map != undefined && playerObject != undefined){

rotateObject(alpha);

}`

Also this event deviceorientationabsolute only fires on mobile device only.
Can anyone help me out here please?
Here is my code:

JS

var longitude, latitude, diff, map;
var playerObject;
var alpha,lastAngle = 0;
window.addEventListener("deviceorientationabsolute", manageCompass, false);

function manageCompass(event) {
    if (event.webkitCompassHeading) {
        absoluteHeading = event.webkitCompassHeading + 180;
    } else {
        absoluteHeading = 180 - event.alpha;
    }
    console.log(absoluteHeading);
    alpha = absoluteHeading;
    if(parseInt(alpha) < 0){
      alpha = 360 - (360+alpha);
    }else if(parseInt(alpha) > 0){
      alpha = 360 - alpha;
    }

    if(parseInt(alpha) >=0 && parseInt(alpha) <= 180){
      alpha = 180-alpha;
    }else if(parseInt(alpha) >= 181 && parseInt(alpha) <= 359){
      alpha = 360 + (180 - alpha);
    }

    if(map != undefined && playerObject != undefined){
      rotateObject(alpha);
    }
    document.getElementById("info").innerHTML = JSON.stringify(parseInt(alpha)+"::"+(-alpha/100));



}

var rot2;
function rotateObject(nR) {
    var aR;
    rot2 = rot2 || 0; // if rot undefined or 0, make 0, else rot
    aR = rot2 % 360;
    if ( aR < 0 ) { aR += 360; }
    if ( aR < 180 && (nR > (aR + 180)) ) { rot2 -= 360; }
    if ( aR >= 180 && (nR <= (aR - 180)) ) { rot2 += 360; }
    rot2 += (nR - aR);
    if(playerObject != undefined){
      playerObject.rotation.y = -(rot2*(Math.PI/180));


}

rotateObject(0);


$(document).ready(function(){

  longitude = 77.125359;
  latitude =  28.707624;
  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.9,
        pitch: 95,
        bearing: 0,
        container: 'map',
        antialias: false,
        dragPan: false,
        dragRotate: false,
        maxZoom: 18.4,
        minZoom: 17.3
    });

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

    map.on('rotate',function(){
        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;
            }
        }


      modelRotate = [Math.PI / 2, Math.PI, 0];
      model();
      map.addLayer(customLayer, 'waterway-label');
      startloop();

});
}


function afterOwnModelLoad(){

if(!map.getSource('polygon')){
                         map.addSource("polygon", createGeoJSONCircle([longitude, latitude], 0.02));
                         map.addLayer({
                            "id": "polygon",
                            "type": "fill",
                            "source": "polygon",
                            "layout": {},
                            "paint": {
                               "fill-color": "blue",
                               "fill-opacity": 0.1
                            }
                         });
                    }
}

var createGeoJSONCircle = function(center, radiusInKm, points) {
    if(!points) points = 64;

    var coords = {
        latitude: center[1],
        longitude: center[0]
    };

    var km = radiusInKm;

    var ret = [];
    var distanceX = km/(111.320*Math.cos(coords.latitude*Math.PI/180));
    var distanceY = km/110.574;

    var theta, x, y;
    for(var i=0; i<points; i++) {
        theta = (i/points)*(2*Math.PI);
        x = distanceX*Math.cos(theta);
        y = distanceY*Math.sin(theta);

        ret.push([coords.longitude+x, coords.latitude+y]);
    }
    ret.push(ret[0]);
    currGhstCrd = ret;

    return {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [ret]
                }
            }]
        }
    };
};

function startloop(){
    setInterval(function(){
        if(map != undefined){
           model();
        }
    }, 1);
}



function model(){

// parameters to ensure the model is georeferenced correctly on the map
//var modelOrigin = [77.052024, 28.459822];
 modelOrigin = [longitude,latitude];
 modelAltitude = 0;


 modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
    modelOrigin,
    modelAltitude
);

// transformation parameters to position, rotate and scale the 3D model onto the map
 modelTransform = {
    translateX: modelAsMercatorCoordinate.x,
    translateY: modelAsMercatorCoordinate.y,
    translateZ: modelAsMercatorCoordinate.z,
    rotateX: modelRotate[0],
    rotateY: modelRotate[1],
    rotateZ: modelRotate[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: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
};

 THREE = window.THREE;

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

        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(
            'https://www.zamit.one/location/Drone/Drone.gltf',
            function (gltf) {
                this.scene.add(gltf.scene);
                afterOwnModelLoad();
                playerObject = 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;

    },
    render: function (gl, matrix) {
        var rotationX = new THREE.Matrix4().makeRotationAxis(
            new THREE.Vector3(1, 0, 0),
            modelTransform.rotateX
        );
        var rotationY = new THREE.Matrix4().makeRotationAxis(
            new THREE.Vector3(0, 1, 0),
            modelTransform.rotateY
        );
        var rotationZ = new THREE.Matrix4().makeRotationAxis(
            new THREE.Vector3(0, 0, 1),
            modelTransform.rotateZ
        );

        var m = new THREE.Matrix4().fromArray(matrix);
        var l = new THREE.Matrix4()
            .makeTranslation(
                modelTransform.translateX,
                modelTransform.translateY,
                modelTransform.translateZ
            )
            .scale(
                new THREE.Vector3(
                    modelTransform.scale*2,
                    -modelTransform.scale*2,
                    modelTransform.scale*2
                )
            )
            .multiply(rotationX)
            .multiply(rotationY)
            .multiply(rotationZ);

        this.camera.projectionMatrix = m.multiply(l);
        this.renderer.state.reset();
        this.renderer.render(this.scene, this.camera);
        renderer = this.renderer;
        scene = this.scene;
        camera = this.camera;
        originalX = modelTransform.translateX;
        originalY = modelTransform.translateY;
        this.map.triggerRepaint();

//        console.log(modelTransform);
    }
};

}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Rotate a 3D model</title>

    <meta name="viewport" content="width=device-width,
    user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />


    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
    <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.8.1/mapbox-gl.js"></script>
    <!--    <script src="https://unpkg.com/three@0.106.2/build/three.min.js"></script>-->
    <script src="js/three.min.js"></script>
    <!--    <script src="https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader.js"></script>-->

    <script src="js/GLTFLoader.js"></script>

    <script src="dist/tween.umd.js"></script>
    <script src="js/RequestAnimationFrame.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
    <script src="js/fulltilt.min.js"></script>


    <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    #info {
          display: block;
          position: relative;
          margin: 0px auto;
          width: 50%;
          padding: 10px;
          border: none;
          border-radius: 3px;
          font-size: 12px;
          text-align: center;
          color: #222;
          opacity: 1;
          transition: 2s;
          transition-timing-function: ease;
      }
    </style>
</head>
<body>
<div id="map"></div>
<pre id="info"></pre>
<script src = "js/test.js"> </script>
</body>
</html> 

MainActivity.Java

public class MainActivity extends AppCompatActivity {

    WebView webView;
    MainActivity mainActivity ;
    private Context mContext;
    private Geocoder geocoder;

    public static final int MY_PERMISSIONS_REQUEST_ACCESS_LOCATION = 200;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
        super.onCreate(savedInstanceState);

        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
        setContentView(R.layout.activity_main);

        webView = (WebView)findViewById(R.id.mybrowser);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(new MyWebLogger());

        webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        webView.setScrollbarFadingEnabled(false);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setGeolocationEnabled(true);


        webView.loadUrl("file:///android_asset/test.html");


        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url != null) view.loadUrl(url);
                return true;
            }
        });



    }

}

I was trying to ask from js community as well. I redundantly mentioned the three.js tags as well by mistake ,sorry

I have solved two of the problems and have edited my question, I just need to solve the last part of the problem now. Can you please help me out here?