Модели

Выберите платформу: Android iOS JavaScript

Модели — это трёхмерные объекты, которые можно добавлять в сцену для представления других объектов. 3D-карты в Maps JavaScript API поддерживают включение моделей gLTF. Эти модели можно масштабировать и вращать для дальнейшей настройки.

Модели должны поддерживать основные свойства glTF PBR . Расширения или свойства расширений не поддерживаются.

Добавить модель

Конструктор Model3DElement принимает набор параметров Model3DElementOptions , определяющих координаты LatLng модели, и набор параметров для позиционирования модели.

Модели поддерживают следующие опции:

  • position : Местоположение модели, выраженное в координатах LatLng .
  • orientation : Вращение системы координат модели. Вращения применяются в следующем порядке: крен, наклон, а затем направление.
  • scale : Масштабирует модель в ее координатном пространстве. Значение по умолчанию — 1 .
  • altitudeMode : Способ интерпретации высоты, выраженной в position .
  • src : URL модели.

В следующем примере показано добавление модели на карту и ее изменение с использованием некоторых доступных параметров настройки: 

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void init();

Добавить интерактивную модель

Модели также поддерживают взаимодействие. В следующем примере масштаб модели изменяется при щелчке. 

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();