Add a 3D model

Use a custom style layer with three.js to add a 3D model to the map. See the example: https://docs.mapbox.com//mapbox-gl-js/example/add-3d-model/

by jscastro76

HTML

<link type="text/css" rel="stylesheet" href="main.css">

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.toolTip {
  border: 0.5px black solid;
  display: inline-block;
  background: white;
  padding: 1px 6px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 11px !important;
}

.marker {
  max-width: 240px;
  display: flex;
  margin-bottom: 5em;
}

.mapboxgl-popup-tip {
  margin-top: -1px;
}

JavaScript

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';

			import Stats from 'https://unpkg.com/[email protected]/jsm/libs/stats.module.js';

			import {
			  OrbitControls
			} from 'https://unpkg.com/[email protected]/jsm/controls/OrbitControls.js';
			import {
			  FBXLoader
			} from 'https://unpkg.com/[email protected]/jsm/loaders/FBXLoader.js';

			var container, stats, controls;
			var camera, scene, renderer, light;

			var clock = new THREE.Clock();

			var mixer;

			init();
			animate();

			function init() {

			  container = document.createElement('div');
			  document.body.appendChild(container);

			  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
			  camera.position.set(100, 200, 300);

			  scene = new THREE.Scene();
			  scene.background = new THREE.Color(0xa0a0a0);
			  scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);

			  light = new THREE.HemisphereLight(0xffffff, 0x444444);
			  light.position.set(0, 200, 0);
			  scene.add(light);

			  light = new THREE.DirectionalLight(0xffffff);
			  light.position.set(0, 200, 100);
			  light.castShadow = true;
			  light.shadow.camera.top = 180;
			  light.shadow.camera.bottom = -100;
			  light.shadow.camera.left = -120;
			  light.shadow.camera.right = 120;
			  scene.add(light);

			  // scene.add( new CameraHelper( light.shadow.camera ) );

			  // ground
			  var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({
			    color: 0x999999,
			    depthWrite: false
			  }));
			  mesh.rotation.x = -Math.PI / 2;
			  mesh.receiveShadow = true;
			  scene.add(mesh);

			  var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
			  grid.material.opacity = 0.2;
			  grid.material.transparent = true;
			  scene.add(grid);

			  // model
			  var loader = new FBXLoader();
			  loader.load('models/fbx/Samba Dancing.fbx', function(object) {

			    mixer = new THREE.AnimationMixer(object);

			    var...