Modelli

Seleziona la piattaforma: Android iOS JavaScript

I modelli sono asset 3D che possono essere aggiunti alla scena per rappresentare gli oggetti. Le mappe 3D nell'API Maps JavaScript supportano l'inclusione di modelli gLTF. Questi modelli possono essere scalati e ruotati per consentire un'ulteriore personalizzazione.

I modelli devono supportare le proprietà principali del glTF PBR. Non sono supportate estensioni o proprietà di estensione.

Aggiungi un modello

Il Model3DElement costruttore accetta un insieme di Model3DElementOptions che specificano le LatLng coordinate del modello e un insieme di parametri per supportare il posizionamento del modello.

I modelli supportano le seguenti opzioni:

  • position: la posizione del modello espressa in coordinate LatLng.
  • orientation: la rotazione del sistema di coordinate del modello. Le rotazioni vengono applicate nel seguente ordine: rollio, beccheggio e poi orientamento.
  • scale: scala il modello nel suo spazio di coordinate. Il valore predefinito è 1.
  • altitudeMode: la modalità di interpretazione dell'altitudine espressa in position.
  • src: l'URL del modello.

L'esempio seguente mostra come aggiungere un modello alla mappa e modificarlo utilizzando alcune delle opzioni di personalizzazione disponibili:

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

Aggiungi un modello interattivo

I modelli supportano anche l'interazione. L'esempio seguente modifica la scala del modello quando viene fatto clic.

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