Modèles

Les modèles sont des assets 3D qui peuvent être ajoutés à une scène pour représenter des objets. Les cartes 3D photoréalistes de l'API Maps JavaScript sont compatibles avec l'inclusion de modèles glTF. Ces modèles peuvent être mis à l'échelle et pivotés pour permettre une personnalisation plus poussée.

Les modèles doivent être compatibles avec les propriétés de base du fichier PBR glTF. Aucune extension ou propriété d'extension n'est acceptée.

Ajouter un modèle

Le constructeur Model3DElement utilise un ensemble de Model3DElementOptions spécifiant les coordonnées LatLng du modèle et un ensemble de paramètres pour permettre son positionnement.

Les modèles sont compatibles avec les options suivantes:

  • position: emplacement du modèle, exprimé en coordonnées LatLng.
  • orientation: rotation du système de coordonnées du modèle. Les rotations sont appliquées dans l'ordre suivant: roulement, inclinaison, puis cap.
  • scale: met le modèle à l'échelle dans son espace de coordonnées. La valeur par défaut est 1.
  • altitudeMode: manière dont l'altitude exprimée dans position est interprétée.
  • src: URL du modèle.

L'exemple suivant montre comment ajouter des modèles à la carte et les modifier à l'aide des options de personnalisation disponibles:

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

Ajouter un modèle interactif

Les modèles prennent également en charge les interactions. L'exemple suivant modifie l'échelle du modèle lorsque l'utilisateur clique dessus.

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