Modele

Wybierz platformę: Android iOS JavaScript

Modele to zasoby 3D, które można dodać do sceny, aby przedstawiały obiekty. Fotorealistyczne mapy 3D w interfejsie Maps JavaScript API obsługują dodawanie modeli glTF. Modele te można skalować i obracać, aby je jeszcze bardziej dostosować.

Modele muszą obsługiwać podstawowe właściwości glTF PBR. Nie są obsługiwane żadne rozszerzenia ani właściwości rozszerzeń.

Dodawanie modelu

Konstruktor Model3DElement przyjmuje zbiór Model3DElementOptions określający LatLng współrzędne modelu oraz zbiór parametrów umożliwiających pozycjonowanie modelu.

Modele obsługują te opcje:

  • position: lokalizacja modelu wyrażona we współrzędnych LatLng.
  • orientation: obrót układu współrzędnych modelu. Rotacje są stosowane w tej kolejności: obrót, pochylenie, a potem kierunek.
  • scale: skaluje model w jego przestrzeni współrzędnych. (wartością domyślną jest 1);
  • altitudeMode: sposób interpretacji wysokości wyrażonej w position.
  • src: adres URL modelu.

Poniższy przykład pokazuje, jak dodać modele do mapy i zmodyfikować je za pomocą dostępnych opcji dostosowywania:

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

Dodawanie modelu interaktywnego

Modele obsługują też interakcje. W przykładzie poniżej zmieniamy 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();