Настройка интерактивной сцены для glTF-плагина v2

В текущем разделе описана пошаговая инструкция по настройке интерактивной сцены недвижимости для glTF-плагина второй вресии. Для этого понадобится инструмент для позиционирования моделей на карте, чтобы не формировать файл конфигурации вручную.

Размещение моделей на карте

Откройте инструмент для позиционирования моделей на карте и переместите карту в то место, куда будут добавляться модели.

Нажмите на кнопку "Add model" на панели инструментов и выберите модель из списка файлов. Можно выбрать несколько моделей. Все модели добавляются в центр карты.

Примечание

Если необходимо добавить на карту одну и ту же модель в нескольких экземплярах, например, при типовой застройке, то повторяйте этот пункт, каждый раз выбирая один и тот же файл модели.

Нажмите на вновь добаленную модель: она выделится зеленым цветом и появится панель с ее параметрами.

Поскольку на карте уже есть примитивное здание (коробка), то необходимо его скрыть, чтобы на его место встала модель и не было визуальных пересечений. Для этого кликните ЛКМ по этому зданию-коробке: оно исчезнет с карты, и в списке "ID зданий" в параметрах модели появится его ID.

Примечание

Если необходимо скрыть несколько зданий-коробок, то кликните ЛКМ на каждое из них. Также если Вам уже известен ID здания, то можно его добавить в список "ID зданий" вручную.

Спозиционируйте добавленную модель на карте. Для этого необходимо задать точные координаты модели, ее поворот и масштаб:
- для перемещения модели используйте клавиши стрелок на клавиатуре, либо зажмите ЛКМ над моделью и переместите курсор мыши (драг). Также Вы можете задавать координаты вручную в полях "Долгота" и "Широта".
- для поворта модели задайте значения для каждой из осей в соответствующих полях "X", "Y" и "Z" в секции "Поворот". Также есть возможность повернуть модель по Z-оси зажав клавишу "R" (курсор мыши изменится на ), затем зажав ЛКМ и переместив курсор мыши вокруг здания.
- для масштабирования модели задайте значение в поле "X, Y, Z" в секции "Масштаб". Масштабирование модели также доступно путем зажатия клавиши "S" (курсор мыши изменится на ), затем ЛКМ и перемещения курсора мыши по направлению от (увеличение) или к центру (уменьшение) модели.

Повторите пункты 2-5 для каждой модели, которую необходимо разместить на сцене.

Примечание

Если необходимо удалить модель со сцены, нажмите на и подтвердите удаление в диалоговом окне браузера.

Для просмотра полученной сцены снимите выделение с последней редактируемой модели, нажав на крестик в панели параметров модели или клавишу "Esc" клавиатуры. Оцените визуал, вращая карту и меняя ее зум. При необходимости внесите изменения в модель, как это описано в пункте 5.

Нажмите на кнопку "Получить конфиг сцены": скачается файл mapgl-gltf-config.json. В нем будет находится предварительная конфигурация интерактивной сцены недвижимости. На текущем этапе завершена настройка расположения моделей на карте. Перейдите к следующему разделу для настройки поэтажных планов.

Настройка поэтажных планов

Откройте файл mapgl-gltf-config.json, полученный в предыдущем разделе. В нем находится массив настроек для каждой модели, которые были размещены на карте. На текущем этапе необходимо заполнить массив floors в каждой из моделей.

mapgl-gltf-config.json

```js
[
    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.60999999999991,
        scale: 1,
        linkedIds: ['13933647002601472'],
        floors: [],
    },
    {
        modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
        coordinates: [55.27088606843354, 25.19668331126981],
        modelUrl: 'standpointtowers3.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 243.91000000000005,
        scale: 1,
        linkedIds: ['13933647002601471'],
        floors: [],
    },
    {
        modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
        coordinates: [55.27067156776716, 25.197123844470752],
        modelUrl: 'standpointtowers6.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 59.63999999999995,
        scale: 1,
        linkedIds: ['70030076452542637', '13933647002603034'],
        floors: [],
    },
    {
        modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
        coordinates: [55.270887739054025, 25.19668130155175],
        modelUrl: 'standpointtowers_center.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.40999999999987,
        scale: 1,
        linkedIds: ['13933647002592567'],
        floors: [],
    },
]
```

Важно

Для каждого здания этажи заполняются от нижнего до верхнего, т.е., например, от этажа с отрицательным номером или паркинга до самого высокого этажа.

Предположим, необходимо добавить этаж к зданию с modelId standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a (первое здание из файла конфигурации). Добавьте объект в массив floors с основными параметрами этажа:

{
    modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
    coordinates: [55.27088522875024, 25.196681784153185],
    modelUrl: 'standpointtowers2.glb',
    interactive: true,
    rotateX: 0,
    rotateY: 0,
    rotateZ: -116.60999999999991,
    scale: 1,
    linkedIds: ['13933647002601472'],
    floors: [{
        id: '2',
        text: '2',
        modelUrl: 'standpointtowers4-2.glb',
    }],
}

где:

id - уникальный ID этажа в рамках здания;
text - название этажа, которое будет отображено в контроле этажей. Например, если этажный план соответсвует паркингу, можно задать название как P или -1;
modelUrl - путь до файла модели этажа. Обратите внимание, что если задан не абсолютный путь, то итоговый URL будет построен относительно modelsBaseUrl из опций плагина.

Если необходимо сделать этаж подземным, то добавьте в опции свойство isUnderground со значением true:

{
    ...
    floors: [{
        id: '2',
        text: '2',
        modelUrl: 'standpointtowers4-2.glb',
        isUnderground: true,
    }],
}

Добавьте оставшиеся этажи к зданию, повторив пункты 2 и 3.

{
    ...
    floors: [
        {
            id: '2',
            text: '2',
            modelUrl: 'standpointtowers4-2.glb',
            isUnderground: true,
        },
        {
            id: '3',
            text: '3-17',
            modelUrl: 'standpointtowers4-3.glb',
        },
    ],
}

Добавьте этажи к оставшимся зданиям при необходимости, выполнив пункты 2-4 для каждого из них. В итоге конфигурация интерактивной сцены недвижимости будет иметь следующий вид:

mapgl-gltf-config.json

```js
[
    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.60999999999991,
        scale: 1,
        linkedIds: ['13933647002601472'],
        floors: [
            {
                id: '2',
                text: '2',
                modelUrl: 'standpointtowers4-2.glb',
                isUnderground: true,
            },
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
            },
        ],
    },
    {
        modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
        coordinates: [55.27088606843354, 25.19668331126981],
        modelUrl: 'standpointtowers3.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 243.91000000000005,
        scale: 1,
        linkedIds: ['13933647002601471'],
        floors: [
            {
                id: '112',
                text: '1-12',
                modelUrl: 'standpointtowers5-2_without_transforms.glb',
            },
            {
                id: '1320',
                text: '13-20',
                modelUrl: 'standpointtowers5-1.glb',
            },
        ],
    },
    {
        modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
        coordinates: [55.27067156776716, 25.197123844470752],
        modelUrl: 'standpointtowers6.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 59.63999999999995,
        scale: 1,
        linkedIds: ['70030076452542637', '13933647002603034'],
        floors: [],
    },
    {
        modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
        coordinates: [55.270887739054025, 25.19668130155175],
        modelUrl: 'standpointtowers_center.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.40999999999987,
        scale: 1,
        linkedIds: ['13933647002592567'],
        floors: [],
    },
]
```

На текущем этапе настройка интерактивной сцены недвижимости завершена. Перейдите к следующему разделу для ее добавления на карту.

Добавление интерактивной сцены на карту

Подключите плагин и проинициализируйте его.
Добавьте конфигурацию интерактивной сцены недвижимости, полученную в предыдущем разделе, на карту:

plugin.addRealtyScene([
    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.60999999999991,
        scale: 1,
        linkedIds: ['13933647002601472'],
        floors: [
            {
                id: '2',
                text: '2',
                modelUrl: 'standpointtowers4-2.glb',
                isUnderground: true,
            },
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
            },
        ],
    },
    {
        modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
        coordinates: [55.27088606843354, 25.19668331126981],
        modelUrl: 'standpointtowers3.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 243.91000000000005,
        scale: 1,
        linkedIds: ['13933647002601471'],
        floors: [
            {
                id: '112',
                text: '1-12',
                modelUrl: 'standpointtowers5-2_without_transforms.glb',
            },
            {
                id: '1320',
                text: '13-20',
                modelUrl: 'standpointtowers5-1.glb',
            },
        ],
    },
    {
        modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
        coordinates: [55.27067156776716, 25.197123844470752],
        modelUrl: 'standpointtowers6.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 59.63999999999995,
        scale: 1,
        linkedIds: ['70030076452542637', '13933647002603034'],
        floors: [],
    },
    {
        modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
        coordinates: [55.270887739054025, 25.19668130155175],
        modelUrl: 'standpointtowers_center.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.40999999999987,
        scale: 1,
        linkedIds: ['13933647002592567'],
        floors: [],
    },
]);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2GIS Map API</title>
    <meta name="description" content="glTF plugin example" />
    <style>
        html,
        body,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="https://mapgl.2gis.com/api/js/v1"></script>
    <script src="https://unpkg.com/@2gis/mapgl-gltf@^2/dist/bundle.js"></script>

    <div id="container"></div>
    <script>
        const map = new mapgl.Map('container', {
            center: [55.270872255787253, 25.196689173834102],
            zoom: 17.9,
            key: 'Your API access key',
            pitch: 45,
            rotation: 330,
            enableTrackResize: true,
            maxZoom: 20.7,
        });

        const plugin = new mapgl.GltfPlugin(map, {
            modelsLoadStrategy: 'waitAll',
            modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/standpointtowers/',
            labelGroupDefaults: {
                fontSize: 14,
            },
            hoverOptions: {
                color: '#FFF3F3',
            },
        });

        plugin.addRealtyScene([
            {
                modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
                coordinates: [55.27088522875024, 25.196681784153185],
                modelUrl: 'standpointtowers2.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -116.60999999999991,
                scale: 1,
                linkedIds: ['13933647002601472'],
                floors: [
                    {
                        id: '2',
                        text: '2',
                        modelUrl: 'standpointtowers4-2.glb',
                        isUnderground: true,
                    },
                    {
                        id: '3',
                        text: '3-17',
                        modelUrl: 'standpointtowers4-3.glb',
                    },
                ],
            },
            {
                modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
                coordinates: [55.27088606843354, 25.19668331126981],
                modelUrl: 'standpointtowers3.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: 243.91000000000005,
                scale: 1,
                linkedIds: ['13933647002601471'],
                floors: [
                    {
                        id: '112',
                        text: '1-12',
                        modelUrl: 'standpointtowers5-2_without_transforms.glb',
                    },
                    {
                        id: '1320',
                        text: '13-20',
                        modelUrl: 'standpointtowers5-1.glb',
                    },
                ],
            },
            {
                modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
                coordinates: [55.27067156776716, 25.197123844470752],
                modelUrl: 'standpointtowers6.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: 59.63999999999995,
                scale: 1,
                linkedIds: ['70030076452542637', '13933647002603034'],
                floors: [],
            },
            {
                modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
                coordinates: [55.270887739054025, 25.19668130155175],
                modelUrl: 'standpointtowers_center.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -116.40999999999987,
                scale: 1,
                linkedIds: ['13933647002592567'],
                floors: [],
            },
        ]);
    </script>
</body>

</html>

Опциональные настройки

Отключение интерактивности здания

Иногда помимо зданий и этажных планов необходимо добавить на сцену здания-заглушки, придомовые территории, объекты городской инфраструктуры и окружающей среды. Например, в конфигурации сцены из предыдущего раздела есть строящееся здание без этажей. Чтобы с ним нельзя было взаимодействовать, измените значение свойства interactive на false:

{
    modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
    coordinates: [55.270887739054025, 25.19668130155175],
    modelUrl: 'standpointtowers_center.glb',
    interactive: false,
    rotateX: 0,
    rotateY: 0,
    rotateZ: -116.40999999999987,
    scale: 1,
    linkedIds: ['13933647002592567'],
    floors: [],
}

Важно

Если отключить интерактивность здания с этажами, то при клике на него этажи просмотреть не получится.

Настройка попапа здания

Если необходимо выводить дополнительную информацию о здании при наведении на него курсора мыши, добавьте в опции здания свойство popupOptions:

mapgl-gltf-config.json

```js
[
    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.60999999999991,
        scale: 1,
        linkedIds: ['13933647002601472'],
        popupOptions: {
            coordinates: [55.271024122768324, 25.19693053802895],
            title: 'Apartments Tower B',
            description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
        },
        floors: [
            {
                id: '2',
                text: '2',
                modelUrl: 'standpointtowers4-2.glb',
                isUnderground: true,
            },
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
            },
        ],
    },
    {
        modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
        coordinates: [55.27088606843354, 25.19668331126981],
        modelUrl: 'standpointtowers3.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 243.91000000000005,
        scale: 1,
        linkedIds: ['13933647002601471'],
        popupOptions: {
            coordinates: [55.270872255787253, 25.196689173834102],
            title: 'Apartments Tower A',
            description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
        },
        floors: [
            {
                id: '112',
                text: '1-12',
                modelUrl: 'standpointtowers5-2_without_transforms.glb',
            },
            {
                id: '1320',
                text: '13-20',
                modelUrl: 'standpointtowers5-1.glb',
            },
        ],
    },
    {
        modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
        coordinates: [55.27067156776716, 25.197123844470752],
        modelUrl: 'standpointtowers6.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 59.63999999999995,
        scale: 1,
        linkedIds: ['70030076452542637', '13933647002603034'],
        floors: [],
    },
    {
        modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
        coordinates: [55.270887739054025, 25.19668130155175],
        modelUrl: 'standpointtowers_center.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.40999999999987,
        scale: 1,
        linkedIds: ['13933647002592567'],
        floors: [],
    },
]
```

Важно

При наведении курсора мыши на неинтерактивное здание попап показан не будет.

Настройка ракурса камеры для зданий и этажей

Если необходимо изменять ракурс камеры при активации здания или этажного плана, добавьте в опции каждого здания и этажного плана свойство mapOptions с параметрами карты. Чтобы получить их, откройте инструменты разработчика, найдите подходящий ракурс камеры для здания или этажа и выполните код в консоли:

console.log(`mapOptions: {
    center: [${map.getCenter()}],
    pitch: ${map.getPitch()},
    zoom: ${map.getZoom()},
    rotation: ${map.getRotation()},
}`);

Например, добавим опции карты для первого здания и его этажей, каждый раз выбирая новый ракурс, выполняя код выше и копируя результат в свойство mapOptions:

{
    modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
    coordinates: [55.27088522875024, 25.196681784153185],
    modelUrl: 'standpointtowers2.glb',
    interactive: true,
    rotateX: 0,
    rotateY: 0,
    rotateZ: -116.60999999999991,
    scale: 1,
    linkedIds: ['13933647002601472'],
    popupOptions: {
        coordinates: [55.271024122768324, 25.19693053802895],
        title: 'Apartments Tower B',
        description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
    },
    mapOptions: {
        center: [55.27104661856671, 25.19654143333551],
        pitch: 45,
        zoom: 19,
        rotation: -173,
    },
    floors: [
        {
            id: '2',
            text: '2',
            modelUrl: 'standpointtowers4-2.glb',
            isUnderground: true,
            mapOptions: {
                center: [55.27101659214413, 25.19692572574951],
                pitch: 17.8,
                zoom: 20.8,
                rotation: 137.02588223579758,
            },
        },
        {
            id: '3',
            text: '3-17',
            modelUrl: 'standpointtowers4-3.glb',
            mapOptions: {
                center: [55.27101659214413, 25.19692572574951],
                pitch: 17.8,
                zoom: 20.75,
                rotation: 137.02588223579758,
            },
        },
    ],
}

Теперь повторим это для каждого здания:

mapgl-gltf-config.json

```js
[
    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.60999999999991,
        scale: 1,
        linkedIds: ['13933647002601472'],
        popupOptions: {
            coordinates: [55.271024122768324, 25.19693053802895],
            title: 'Apartments Tower B',
            description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
        },
        mapOptions: {
            center: [55.27104661856671, 25.19654143333551],
            pitch: 45,
            zoom: 19,
            rotation: -173,
        },
        floors: [
            {
                id: '2',
                text: '2',
                modelUrl: 'standpointtowers4-2.glb',
                isUnderground: true,
                mapOptions: {
                    center: [55.27101659214413, 25.19692572574951],
                    pitch: 17.8,
                    zoom: 20.8,
                    rotation: 137.02588223579758,
                },
            },
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
                mapOptions: {
                    center: [55.27101659214413, 25.19692572574951],
                    pitch: 17.8,
                    zoom: 20.75,
                    rotation: 137.02588223579758,
                },
            },
        ],
    },
    {
        modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
        coordinates: [55.27088606843354, 25.19668331126981],
        modelUrl: 'standpointtowers3.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 243.91000000000005,
        scale: 1,
        linkedIds: ['13933647002601471'],
        popupOptions: {
            coordinates: [55.270872255787253, 25.196689173834102],
            title: 'Apartments Tower A',
            description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
        },
        mapOptions: {
            center: [55.27125168787015, 25.196926809413966],
            pitch: 52,
            zoom: 18.7,
            rotation: -35.4,
        },
        floors: [
            {
                id: '112',
                text: '1-12',
                modelUrl: 'standpointtowers5-2_without_transforms.glb',
                mapOptions: {
                    center: [55.27084419010903, 25.19649935503182],
                    pitch: 9.2,
                    zoom: 19.97,
                    rotation: -12.398906380706755,
                },
            },
            {
                id: '1320',
                text: '13-20',
                modelUrl: 'standpointtowers5-1.glb',
                mapOptions: {
                    center: [55.27084419010903, 25.19649935503182],
                    pitch: 9.2,
                    zoom: 19.8,
                    rotation: -12.398906380706755,
                },
            },
        ],
    },
    {
        modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
        coordinates: [55.27067156776716, 25.197123844470752],
        modelUrl: 'standpointtowers6.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 59.63999999999995,
        scale: 1,
        linkedIds: ['70030076452542637', '13933647002603034'],
        floors: [],
    },
    {
        modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
        coordinates: [55.270887739054025, 25.19668130155175],
        modelUrl: 'standpointtowers_center.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.40999999999987,
        scale: 1,
        linkedIds: ['13933647002592567'],
        floors: [],
    },
]
```

Добавление подписей на этажах

На этажном плане есть возможность разместить подписи, например, с информацией о помещениях. Для этого необходимо настроить группы подписей для каждого этажа. Важным параметром для подписи является ее координаты и высота.

Чтобы получить координаты, откройте инструменты разработчика, выполните в консоли код ниже:
```
map.on('click', ({ lngLat }) => {
    console.log(lngLat);
});

plugin.on('click', ({ lngLat }) => {
    console.log(lngLat);
});
```
Теперь при клике в карту или любую модель в консоли будут выводится координаты клика.
Сделайте активным этаж, на котором Вы бы хотели расставить подписи, кликнув на треубемое здание, а затем выбрав этаж. Например, это будет первое здание и этаж под именем 3-17. Определите места, где должны быть размещены подписи, и кликайте в них, чтобы получить координаты.

Важно

Обратите внимание, что при клике в карту или здание возвращаются координаты плоской карты, т.е. клик происходит в поверхность земли, поэтому при размещении подписей на высоких этажах будут возникать искажения перспективной проекции, т.к. объект на высоте будет казаться больше, если смотреть на него сверху.

Добавьте подписи в опции этажа. Для этого необходимо заполнить массив групп в опции labelGroups этажного плана. Подробнее про опции группы можно узнать в этом разделе. Чтобы поднять подписи на высоту этажа, задайте свойство elevation у группы или у каждой подписи.

    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        ...,
        floors: [
            ...,
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
                mapOptions: {
                    center: [55.27101659214413, 25.19692572574951],
                    pitch: 17.8,
                    zoom: 20.75,
                    rotation: 137.02588223579758,
                },
                labelGroups: [
                    {
                        id: '1111',
                        image: 'default',
                        minZoom: 18.9,
                        elevation: 13,
                        interactive: true,
                        labels: [
                            {
                                coordinates: [55.27095943017267, 25.197085861856678],
                                text: '1 Bed\n323 sqft',
                            },
                            {
                                coordinates: [55.271011424317585, 25.19704189077632],
                                text: '1 Bed\n360 sqft',
                            },
                            {
                                coordinates: [55.27086972852069, 25.196999662434976],
                                text: '1 Bed\n330 sqft',
                            },
                            {
                                coordinates: [55.2711596091742, 25.196857840495],
                                text: '1 Bed\n690 sqft',
                            },
                            {
                                coordinates: [55.2710044354644, 25.19689784165797],
                                text: '1 Bed\n600 sqft',
                            },
                            {
                                coordinates: [55.27109216906766, 25.196807837435273],
                                text: '4 Beds\n1800 sqft',
                            },
                            {
                                coordinates: [55.27114979328282, 25.196936631205745],
                                text: '2 Beds\n1500 sqft',
                            },
                            {
                                coordinates: [55.27094029099825, 25.19695530862026],
                                text: '2 Beds\n1215 sqft',
                            },
                            {
                                coordinates: [55.271084685746885, 25.196991799213222],
                                text: '3 Beds\n2400 sqft',
                            },
                        ],
                    },
                ],
            },
        ],
    }

Если при клике на подпись необходимо переходить по ссылке на другой сайт, добавьте в поле userData подписи свойство url:

    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        ...,
        floors: [
            ...,
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
                ...,
                labelGroups: [
                    {
                        ...,
                        labels: [
                            {
                                coordinates: [55.27095943017267, 25.197085861856678],
                                text: '1 Bed\n323 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.271011424317585, 25.19704189077632],
                                text: '1 Bed\n360 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27086972852069, 25.196999662434976],
                                text: '1 Bed\n330 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.2711596091742, 25.196857840495],
                                text: '1 Bed\n690 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.2710044354644, 25.19689784165797],
                                text: '1 Bed\n600 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27109216906766, 25.196807837435273],
                                text: '4 Beds\n1800 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27114979328282, 25.196936631205745],
                                text: '2 Beds\n1500 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27094029099825, 25.19695530862026],
                                text: '2 Beds\n1215 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.271084685746885, 25.196991799213222],
                                text: '3 Beds\n2400 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                        ],
                    },
                ],
            },
        ],
    }

По умолчанию подложка подписи имеет белый цвет. Ее можно кастомизировать, передав в поле image группы пользовательские настройки. В примере ниже заданы URL (url) изображения в виде data-URL, его размер (size), области растяжения (stretchX и stretchY) и отступы от краев для текста внутри (padding).

Важно

Изображение подложки подписи должно быть в формате .svg.

    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        ...,
        floors: [
            ...,
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
                ...,
                labelGroups: [
                    {
                        id: '1111',
                        image: {
                            url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
                            size: [38, 38],
                            stretchX: [[4, 24]],
                            stretchY: [[4, 24]],
                            padding: [5, 10, 5, 10],
                        },
                        minZoom: 18.9,
                        elevation: 13,
                        interactive: true,
                        labels: [...],
                    },
                ],
            },
        ],
    }

Также есть возможность показать на этаже несколько групп подписей, например, когда необходимо разделить проданные помещения от тех, что в продаже. Для этого добавьте вторую группу в массив labelGroups и перенесите в нее часть подписей из первой группы или задайте новые:

    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        ...,
        floors: [
            ...,
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
                ...,
                labelGroups: [
                    {
                        id: '1111',
                        image: {
                            url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
                            size: [38, 38],
                            stretchX: [[4, 24]],
                            stretchY: [[4, 24]],
                            padding: [5, 10, 5, 10],
                        },
                        minZoom: 18.9,
                        elevation: 13,
                        interactive: true,
                        labels: [
                            {
                                coordinates: [55.27095943017267, 25.197085861856678],
                                text: '1 Bed\n323 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.271011424317585, 25.19704189077632],
                                text: '1 Bed\n360 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                        ],
                    },
                    {
                        id: '2222',
                        image: 'default',
                        minZoom: 18.9,
                        elevation: 13,
                        interactive: true,
                        labels: [
                            {
                                coordinates: [55.27086972852069, 25.196999662434976],
                                text: '1 Bed\n330 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.2711596091742, 25.196857840495],
                                text: '1 Bed\n690 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.2710044354644, 25.19689784165797],
                                text: '1 Bed\n600 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27109216906766, 25.196807837435273],
                                text: '4 Beds\n1800 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27114979328282, 25.196936631205745],
                                text: '2 Beds\n1500 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27094029099825, 25.19695530862026],
                                text: '2 Beds\n1215 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.271084685746885, 25.196991799213222],
                                text: '3 Beds\n2400 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                        ],
                    },
                ],
            },
        ],
    }

На текущем этапе настройка опциональных параметров звершена. Итоговая кофигурация сцены представлена ниже:

mapgl-gltf-config.json

```js
[
    {
        modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
        coordinates: [55.27088522875024, 25.196681784153185],
        modelUrl: 'standpointtowers2.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.60999999999991,
        scale: 1,
        linkedIds: ['13933647002601472'],
        popupOptions: {
            coordinates: [55.271024122768324, 25.19693053802895],
            title: 'Apartments Tower B',
            description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
        },
        mapOptions: {
            center: [55.27104661856671, 25.19654143333551],
            pitch: 45,
            zoom: 19,
            rotation: -173,
        },
        floors: [
            {
                id: '2',
                text: '2',
                modelUrl: 'standpointtowers4-2.glb',
                isUnderground: true,
                mapOptions: {
                    center: [55.27101659214413, 25.19692572574951],
                    pitch: 17.8,
                    zoom: 20.8,
                    rotation: 137.02588223579758,
                },
            },
            {
                id: '3',
                text: '3-17',
                modelUrl: 'standpointtowers4-3.glb',
                mapOptions: {
                    center: [55.27101659214413, 25.19692572574951],
                    pitch: 17.8,
                    zoom: 20.75,
                    rotation: 137.02588223579758,
                },
                labelGroups: [
                    {
                        id: '1111',
                        image: {
                            url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
                            size: [38, 38],
                            stretchX: [[4, 24]],
                            stretchY: [[4, 24]],
                            padding: [5, 10, 5, 10],
                        },
                        minZoom: 18.9,
                        elevation: 13,
                        interactive: true,
                        labels: [
                            {
                                coordinates: [55.27095943017267, 25.197085861856678],
                                text: '1 Bed\n323 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.271011424317585, 25.19704189077632],
                                text: '1 Bed\n360 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                        ],
                    },
                    {
                        id: '2222',
                        image: 'default',
                        minZoom: 18.9,
                        elevation: 13,
                        interactive: true,
                        labels: [
                            {
                                coordinates: [55.27086972852069, 25.196999662434976],
                                text: '1 Bed\n330 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.2711596091742, 25.196857840495],
                                text: '1 Bed\n690 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.2710044354644, 25.19689784165797],
                                text: '1 Bed\n600 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27109216906766, 25.196807837435273],
                                text: '4 Beds\n1800 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27114979328282, 25.196936631205745],
                                text: '2 Beds\n1500 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.27094029099825, 25.19695530862026],
                                text: '2 Beds\n1215 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                            {
                                coordinates: [55.271084685746885, 25.196991799213222],
                                text: '3 Beds\n2400 sqft',
                                userData: {
                                    url: 'https://dev.urbi.ae/',
                                },
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
        coordinates: [55.27088606843354, 25.19668331126981],
        modelUrl: 'standpointtowers3.glb',
        interactive: true,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 243.91000000000005,
        scale: 1,
        linkedIds: ['13933647002601471'],
        popupOptions: {
            coordinates: [55.270872255787253, 25.196689173834102],
            title: 'Apartments Tower A',
            description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
        },
        mapOptions: {
            center: [55.27125168787015, 25.196926809413966],
            pitch: 52,
            zoom: 18.7,
            rotation: -35.4,
        },
        floors: [
            {
                id: '112',
                text: '1-12',
                modelUrl: 'standpointtowers5-2_without_transforms.glb',
                mapOptions: {
                    center: [55.27084419010903, 25.19649935503182],
                    pitch: 9.2,
                    zoom: 19.97,
                    rotation: -12.398906380706755,
                },
            },
            {
                id: '1320',
                text: '13-20',
                modelUrl: 'standpointtowers5-1.glb',
                mapOptions: {
                    center: [55.27084419010903, 25.19649935503182],
                    pitch: 9.2,
                    zoom: 19.8,
                    rotation: -12.398906380706755,
                },
            },
        ],
    },
    {
        modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
        coordinates: [55.27067156776716, 25.197123844470752],
        modelUrl: 'standpointtowers6.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: 59.63999999999995,
        scale: 1,
        linkedIds: ['70030076452542637', '13933647002603034'],
        floors: [],
    },
    {
        modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
        coordinates: [55.270887739054025, 25.19668130155175],
        modelUrl: 'standpointtowers_center.glb',
        interactive: false,
        rotateX: 0,
        rotateY: 0,
        rotateZ: -116.40999999999987,
        scale: 1,
        linkedIds: ['13933647002592567'],
        floors: [],
    },
]
```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2GIS Map API</title>
    <meta name="description" content="glTF plugin example" />
    <style>
        html,
        body,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="https://mapgl.2gis.com/api/js/v1"></script>
    <script src="https://unpkg.com/@2gis/mapgl-gltf@^2/dist/bundle.js"></script>

    <div id="container"></div>
    <script>
        const map = new mapgl.Map('container', {
            center: [55.270872255787253, 25.196689173834102],
            zoom: 17.9,
            key: 'Your API access key',
            pitch: 45,
            rotation: 330,
            enableTrackResize: true,
            maxZoom: 20.7,
        });

        const plugin = new mapgl.GltfPlugin(map, {
            modelsLoadStrategy: 'waitAll',
            modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/standpointtowers/',
            labelGroupDefaults: {
                fontSize: 14,
            },
            hoverOptions: {
                color: '#FFF3F3',
            },
        });

        plugin.addRealtyScene([
            {
                modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
                coordinates: [55.27088522875024, 25.196681784153185],
                modelUrl: 'standpointtowers2.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -116.60999999999991,
                scale: 1,
                linkedIds: ['13933647002601472'],
                popupOptions: {
                    coordinates: [55.271024122768324, 25.19693053802895],
                    title: 'Apartments Tower B',
                    description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
                },
                mapOptions: {
                    center: [55.27104661856671, 25.19654143333551],
                    pitch: 45,
                    zoom: 19,
                    rotation: -173,
                },
                floors: [
                    {
                        id: '2',
                        text: '2',
                        modelUrl: 'standpointtowers4-2.glb',
                        isUnderground: true,
                        mapOptions: {
                            center: [55.27101659214413, 25.19692572574951],
                            pitch: 17.8,
                            zoom: 20.8,
                            rotation: 137.02588223579758,
                        },
                    },
                    {
                        id: '3',
                        text: '3-17',
                        modelUrl: 'standpointtowers4-3.glb',
                        mapOptions: {
                            center: [55.27101659214413, 25.19692572574951],
                            pitch: 17.8,
                            zoom: 20.75,
                            rotation: 137.02588223579758,
                        },
                        labelGroups: [
                            {
                                id: '1111',
                                image: {
                                    url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
                                    size: [38, 38],
                                    stretchX: [[4, 24]],
                                    stretchY: [[4, 24]],
                                    padding: [5, 10, 5, 10],
                                },
                                minZoom: 18.9,
                                elevation: 13,
                                interactive: true,
                                labels: [
                                    {
                                        coordinates: [55.27095943017267, 25.197085861856678],
                                        text: '1 Bed\n323 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                    {
                                        coordinates: [55.271011424317585, 25.19704189077632],
                                        text: '1 Bed\n360 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                ],
                            },
                            {
                                id: '2222',
                                image: 'default',
                                minZoom: 18.9,
                                elevation: 13,
                                interactive: true,
                                labels: [
                                    {
                                        coordinates: [55.27086972852069, 25.196999662434976],
                                        text: '1 Bed\n330 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                    {
                                        coordinates: [55.2711596091742, 25.196857840495],
                                        text: '1 Bed\n690 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                    {
                                        coordinates: [55.2710044354644, 25.19689784165797],
                                        text: '1 Bed\n600 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                    {
                                        coordinates: [55.27109216906766, 25.196807837435273],
                                        text: '4 Beds\n1800 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                    {
                                        coordinates: [55.27114979328282, 25.196936631205745],
                                        text: '2 Beds\n1500 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                    {
                                        coordinates: [55.27094029099825, 25.19695530862026],
                                        text: '2 Beds\n1215 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                    {
                                        coordinates: [55.271084685746885, 25.196991799213222],
                                        text: '3 Beds\n2400 sqft',
                                        userData: {
                                            url: 'https://dev.urbi.ae/',
                                        },
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
            {
                modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
                coordinates: [55.27088606843354, 25.19668331126981],
                modelUrl: 'standpointtowers3.glb',
                interactive: true,
                rotateX: 0,
                rotateY: 0,
                rotateZ: 243.91000000000005,
                scale: 1,
                linkedIds: ['13933647002601471'],
                popupOptions: {
                    coordinates: [55.270872255787253, 25.196689173834102],
                    title: 'Apartments Tower A',
                    description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
                },
                mapOptions: {
                    center: [55.27125168787015, 25.196926809413966],
                    pitch: 52,
                    zoom: 18.7,
                    rotation: -35.4,
                },
                floors: [
                    {
                        id: '112',
                        text: '1-12',
                        modelUrl: 'standpointtowers5-2_without_transforms.glb',
                        mapOptions: {
                            center: [55.27084419010903, 25.19649935503182],
                            pitch: 9.2,
                            zoom: 19.97,
                            rotation: -12.398906380706755,
                        },
                    },
                    {
                        id: '1320',
                        text: '13-20',
                        modelUrl: 'standpointtowers5-1.glb',
                        mapOptions: {
                            center: [55.27084419010903, 25.19649935503182],
                            pitch: 9.2,
                            zoom: 19.8,
                            rotation: -12.398906380706755,
                        },
                    },
                ],
            },
            {
                modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
                coordinates: [55.27067156776716, 25.197123844470752],
                modelUrl: 'standpointtowers6.glb',
                interactive: false,
                rotateX: 0,
                rotateY: 0,
                rotateZ: 59.63999999999995,
                scale: 1,
                linkedIds: ['70030076452542637', '13933647002603034'],
                floors: [],
            },
            {
                modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
                coordinates: [55.270887739054025, 25.19668130155175],
                modelUrl: 'standpointtowers_center.glb',
                interactive: false,
                rotateX: 0,
                rotateY: 0,
                rotateZ: -116.40999999999987,
                scale: 1,
                linkedIds: ['13933647002592567'],
                floors: [],
            },
        ]);
    </script>
</body>

</html>