Mapbox GL JS + Deck.gl Tiles3DLoader example

mapbpx-tiles3dloader.js

import MapboxLayer from '@deck.gl/mapbox/dist/esm/mapbox-layer';
import { Tiles3DLoader } from '@loaders.gl/3d-tiles';
import { Tile3DLayer } from '@deck.gl/geo-layers';

const buildingsLayer = new MapboxLayer({
  id: 'buildings',
  type: Tile3DLayer,
  data: 'URL TO tileset.json',
  loader: Tiles3DLoader,
  loadOptions: {
    tileset: {
      maximumMemoryUsage: 16,
      viewDistanceScale: 5,
    },
  },
  getPointColor: [255, 255, 255],
  _subLayerProps: {
    scenegraph: { getColor: [255, 255, 255, 255] },
    mesh: { getColor: [255, 255, 255, 255] },
  },
});

map.once('styledata', () => {
  map.addLayer(buildingsLayer);
  map.setLayerZoomRange('buildings', 15, 22.1);
});