JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BABYLON Layer for MapBox</title>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl-dev.js'></script>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/babylonjs-loaders@4.1.0/babylonjs.loaders.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>

</body>
</html>

JavaScript

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

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFic2hhcnAiLCJhIjoiY2pkb2JmaHZ2MG5laTMycXV6MW9hbnR6biJ9.UMH3HUf54_y7l-2YpeE8oA';

const center =  [148.9819, -35.3981]
const map = (window.map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  zoom: 18 ,
  center : center,
  pitch: 60,
  antialias: true
}));



let world;

const computeWorld = () => {
  let rotateX = Math.PI / 2, rotateY = 0, rotateZ = 0;

  let mercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
    [148.9819, -35.39847],
    0
  );

  world = BABYLON.Matrix.Identity().setTranslationFromFloats(mercatorCoordinate.x, mercatorCoordinate.y, mercatorCoordinate.z);
  let scaleFactor = mercatorCoordinate.meterInMercatorCoordinateUnits();
  let scale = BABYLON.Matrix.Scaling( scaleFactor, -scaleFactor, scaleFactor);
  world = scale.multiply(world);
  world = BABYLON.Matrix.RotationX(rotateX).multiply(world);
  world = BABYLON.Matrix.RotationY(rotateY).multiply(world);
  world = BABYLON.Matrix.RotationZ(rotateZ).multiply(world);
};

const customLayer = {
  id: '3d-model',
  type: 'custom',
  renderingMode: '3d',
  onAdd: function(map, gl) {
    this.map = map;
    this.engine = new BABYLON.Engine(gl, true);
    window.dispatchEvent(new Event('resize'));
    computeWorld();
    BABYLON.SceneLoader.Load("https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/", "34M_17.gltf", this.engine, 
    (scene) => {
      this.scene = scene;
      this.scene.activeCamera = new BABYLON.Camera('mapboxCamera', new BABYLON.Vector3(), this.scene);
      this.scene.autoClear = false;
      this.scene.detachControl();
    });
  },
  render: function(gl, matrix) {
    if(this.scene) {
      let projection = BABYLON.Matrix.FromArray(matrix);
      this.scene.activeCamera.freezeProjectionMatrix(world.multiply(projection));
      this.scene.render(false);
      this.engine.wipeCaches(true);
    }
    this.map.triggerRepaint();
 ...