Импорт 3D-модели в Mapbox

#mapbox #mapbox-gl-js

#картографический ящик #mapbox-gl-js

Вопрос:

Я видел сообщение «Добавить 3D-модель в Mapbox GL JS Map». Если у меня есть модель GLTF, экспортированная из Autodesk Revit, как мне точно разместить 3D-модель на карте по заданным географическим координатам (wgs84)?

Ответ №1:

Вы изучили последнюю версию threebox?? Это позволяет добавлять столько моделей и 3D-слоев, сколько вы хотите, поверх Mapbox, используя их поддержку 3D-объектов, CustomLayerInterface всего несколькими строками кода

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

И вы можете сделать гораздо больше…
— Встроенные 3D-модели и пользовательские анимации

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

— Полная поддержка raycast наведение / выведение курсора мыши, Выбор, перетаскивание, перетаскивание и поворот, каркас

Наведение / Вывод курсора мыши, Выделение, перетаскивание, перетаскивание и поворот, Каркас

— Всплывающие подсказки и метки CSS2D, учитывающие высоту

Всплывающие подсказки и метки CSS2D, учитывающие высоту

— Three.js и камеры Mapbox синхронизируются с регулировкой глубины

Three.js и камеры Mapbox синхронизируются с регулировкой глубины

— Включить геолокационные модели памятников с встроенной поддержкой солнечного света и теней

Эйфелева башня gif

— Оптимизирован для загрузки тысяч 3D-объектов

Производительность