Modelle

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Modelle sind 3D-Assets, die einer Szene hinzugefügt werden können, um Objekte darzustellen. Die fotorealistischen 3D-Karten in der Maps JavaScript API unterstützen die Einbindung von gLTF-Modellen. Diese Modelle können für weitere Anpassungen skaliert und rotiert werden.

Die Modelle müssen die Kernattribute der glTF-PBR unterstützen. Es werden keine Erweiterungen oder Erweiterungseigenschaften unterstützt.

Modell hinzufügen

Der Konstruktor Model3DElement verwendet eine Reihe von Model3DElementOptions, die die LatLng-Koordinaten des Modells und eine Reihe von Parametern angeben, die die Positionierung des Modells unterstützen.

Modelle unterstützen die folgenden Optionen:

• position: Der Standort des Modells, ausgedrückt in LatLng-Koordinaten.
• orientation: Die Drehung des Koordinatensystems des Modells. Rotationen werden in der folgenden Reihenfolge angewendet: Rollen, Neigung und dann Richtung.
• scale: Skaliert das Modell im Koordinatenbereich. Der Standardwert ist 1.
• altitudeMode: Wie die in position ausgedrückte Höhe interpretiert wird.
• src: Die URL des Modells.

Im folgenden Beispiel wird gezeigt, wie der Karte Modelle hinzugefügt und mithilfe der verfügbaren Anpassungsoptionen geändert werden:

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

Interaktives Modell hinzufügen

Modelle unterstützen auch Interaktionen. Im folgenden Beispiel wird der Maßstab des Modells geändert, wenn darauf geklickt wird.

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