Add a 3D model with threebox | Mapbox GL JS

This example uses a custom style layer with the threebox plugin to add a 3D model to the map. Threebox abstracts the 3D rendering library three.js, and keeps its scene camera in sync with the Mapbox GL JS camera.

An alternative example that uses three.js directly to display a 3D model is available at Add a 3D model.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a 3D model with threebox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.css" rel="stylesheet">
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/light-v11',
        center: { lng: -73.97627, lat: 40.75155 },
        zoom: 15.4,
        pitch: 64.9,
        bearing: 172.5,
        antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
    });

    // eslint-disable-next-line no-undef
    const tb = (window.tb = new Threebox(
        map,
        map.getCanvas().getContext('webgl'),
        {
            defaultLights: true
        }
    ));

    map.on('style.load', () => {
        map.addLayer({
            id: 'custom-threebox-model',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function () {
                // Creative Commons License attribution:  Metlife Building model by https://sketchfab.com/NanoRay
                // https://sketchfab.com/3d-models/metlife-building-32d3a4a1810a4d64abb9547bb661f7f3
                const scale = 3.2;
                const options = {
                    obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/metlife-building.gltf',
                    type: 'gltf',
                    scale: { x: scale, y: scale, z: 2.7 },
                    units: 'meters',
                    rotation: { x: 90, y: -90, z: 0 }
                };

                tb.loadObj(options, (model) => {
                    model.setCoords([-73.976799, 40.754145]);
                    model.setRotation({ x: 0, y: 0, z: 241 });
                    tb.add(model);
                });
            },

            render: function () {
                tb.update();
            }
        });
    });
</script>

</body>
</html>

Was this example helpful?