Import 3D model to Mapbox

Question

I saw a post of the "Add a 3D Model to a Mapbox GL JS Map". If I have a GLTF model exported from Autodesk Revit, how do I place the 3D model accurately on the map by a given geo coordinates (wgs84)?

user_13583598 · Answer

Have you explored the latest version of threebox?? It enables you to add as many models and 3D layers as you want on top of Mapbox using their support for 3D objects through CustomLayerInterface with only a few lines of code

    map.on('style.load', function () {
        map.addLayer({
            id: 'custom_layer',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, mbxContext) {

                window.tb = new Threebox(
                    map,
                    mbxContext,
                    { defaultLights: true }
                );

                var options = {
                    obj: '/3D/soldier/soldier.glb',
                    type: 'gltf',
                    scale: 1,
                    units: 'meters',
                    rotation: { x: 90, y: 0, z: 0 } //default rotation
                }

                tb.loadObj(options, function (model) {
                    soldier = model.setCoords(origin);
                    tb.add(soldier);
                })

            },
            render: function (gl, matrix) {
                tb.update();
            }
        });
    })

And you can do much more... - 3D models built-in and custom animations

- Full raycast support MouseOver/Mouseout, Selected, Drag&Drop, Drag&Rotate, Wireframe

- CSS2D Tooltips and Labels that consider altitude

- Three.js and Mapbox cameras sync with depth adjustment

- Include geolocated models of monuments with sunlight & shadows build-in support

- Optimized to load thousands of 3D objects

Import 3D model to Mapbox

1 Answers