Modelli

I modelli sono asset 3D che possono essere aggiunti alla scena per rappresentare gli oggetti. Le mappe 3D fotorealistiche nell'API Maps JavaScript supporta 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 PBR glTF. Non sono supportate estensioni o proprietà delle estensioni.

Aggiungi un modello

Il costruttore Model3DElement prende un set di Model3DElementOptions che specifica le coordinate LatLng del modello e un set 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: rotazione, inclinazione e poi intestazione.
• scale: scala il modello nello spazio di coordinate. Il valore predefinito è 1.
• altitudeMode: come viene interpretata l'altitudine espressa in position.
• src: l'URL del modello.

L'esempio seguente mostra l'aggiunta di modelli alla mappa e la loro modifica utilizzando le opzioni di personalizzazione disponibili:

async function init() {
  const { Map3DElement, MapMode, Model3DElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);
  
  const models = [
    // A model with regular settings.
    {
      position: {lat: 37.76, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
    },
    // Scaled down model.
    {
      position: {lat: 37.75, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 0.8,
    },
    // Scaled up model.
    {
      position: {lat: 37.735, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 1.2,
    },
    // A model with an additional transformation applied.
    {
      position: {lat: 37.72, lng: -121.63, altitude: 0},
      orientation: {tilt: 270, roll: 90},
    },
    // Non-clamped to the ground model.
    {
      position: {lat: 37.71, lng: -121.63, altitude: 1000},
      altitudeMode: 'RELATIVE_TO_GROUND',
      orientation: {tilt: 270},
    },
  ];

  for (const {position, altitudeMode, orientation, scale} of models) {
    const model = new Model3DElement({
      src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
      position,
      altitudeMode,
      orientation,
      scale,
    });

    map.append(model);
  }
}

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() {
  const { Map3DElement, MapMode, Model3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);

  const model = new Model3DInteractiveElement({
    src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
    position: {lat: 37.76, lng: -121.63, altitude: 0},
    scale: 1.0,
  });

  model.addEventListener('gmp-click', (event) => {
    model.scale = (Math.random() * (1 - 2)).toFixed(2);

  });

  map.append(model);
}

init();