Modele

Modele to zasoby 3D, które można dodawać do sceny, aby odzwierciedlić obiekty. Fotorealistyczne mapy 3D w interfejsie Maps JavaScript API obsługują modele gLTF. Modele te można skalować i obracać, co pozwala na dalsze dostosowywanie.

Modele muszą obsługiwać podstawowe właściwości glTF PBR. Żadne rozszerzenia ani właściwości nie są obsługiwane.

Dodawanie modelu

Konstruktor Model3DElement pobiera zbiór Model3DElementOptions, który określa współrzędne LatLng modelu oraz zbiór parametrów wspomagających jego pozycjonowanie.

Modele obsługują te opcje:

• position: lokalizacja modelu wyrażona za pomocą współrzędnych LatLng.
• orientation: obrót układu współrzędnych modelu. Obroty są stosowane w następującej kolejności: obrót, przechylenie, a następnie kierunek.
• scale: skaluje model w przestrzeni współrzędnych. (wartością domyślną jest 1);
• altitudeMode: jak jest interpretowana wysokość przedstawiona w polu position.
• src: adres URL modelu.

Ten przykład pokazuje, jak dodawać modele do mapy i modyfikować je za pomocą dostępnych opcji dostosowania:

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

Dodaj model interaktywny

Modele obsługują też interakcję. Poniższy przykład zmienia skalę modelu po kliknięciu.

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