Как добавить автономную 3D-модель белого города в Mapbox

Question

Я хочу добавить автономную 3D-модель города белого цвета в mapbox с помощью mapbox-gl. js. Примерно так: https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings demo Что это за форматы данных? (.shp? .obj? ...) Могу ли я использовать Three. js для загрузки этих данных модели?

Answer 1

Я бы порекомендовал вам проверить последнюю версию threebox , поскольку она позволяет вам делать такие вещи, как эти ниже, с помощью нескольких строк кода

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';

var origin = [2.294514, 48.857475];

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-v9',
    center: origin,
    zoom: 18,
    pitch: 60,
    bearing: 0
});

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,
                    }
                );

                // import tower from an external glb file, downscaling it to real size
                // IMPORTANT: .glb is not a standard MIME TYPE, you'll have to add it to your web server config,
                // otherwise you'll receive a 404 error
                var options = {
                    obj: '/3D/eiffel/eiffel.glb',
                    type: 'gltf',
                    scale: 0.01029,
                    units: 'meters',
                    rotation: { x: 0, y: 0, z: 0 }, //default rotation
                    adjustment: { x: -0.5, y: -0.5, z: 0 } // place the center in one corner for perfect positioning and rotation
                }

                tb.loadObj(options, function (model) {

                    model.setCoords(origin); //position
                    model.setRotation({ x: 0, y: 0, z: 45.7 }); //rotate it

                    tb.add(model);
                })

            },

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

</script>

- Встроенные 3D-модели и настраиваемые анимации

- 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

Эйфелева башня гифка

Answer 2

Да, конечно, можете! Взгляните на https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/.

Он загружает модель glTF, но вы можете загружать все, что поддерживается THREE. js, включая obj файлы.