Modelos

Selecione a plataforma: Android iOS JavaScript

Os modelos são recursos 3D que podem ser adicionados à cena para representar objetos. Os mapas 3D na API Maps JavaScript permitem a inclusão de modelos gLTF. Esses modelos podem ser dimensionados e girados para permitir mais personalização.

Os modelos precisam ser compatíveis com as propriedades principais do PBR glTF. Não há suporte para extensões ou propriedades de extensão.

Adicionar um modelo

O construtor Model3DElement usa um conjunto de Model3DElementOptions que especificam as coordenadas LatLng do modelo e um conjunto de parâmetros para posicionar o modelo.

Os modelos são compatíveis com as seguintes opções:

  • position: a localização do modelo expressa em coordenadas LatLng.
  • orientation: a rotação do sistema de coordenadas do modelo. As rotações são aplicadas na seguinte ordem: rotação, inclinação e direção.
  • scale: dimensiona o modelo no espaço de coordenadas. O valor padrão é 1.
  • altitudeMode: como a altitude expressa em position é interpretada.
  • src: o URL do modelo.

O exemplo a seguir demonstra como adicionar um modelo ao mapa e modificá-lo usando algumas das opções de personalização disponíveis:

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

Adicionar um modelo interativo

Os modelos também oferecem suporte à interação. O exemplo a seguir muda a escala do modelo quando clicado.

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