Modelos

Selecciona la plataforma: Android iOS JavaScript

Los modelos son recursos 3D que se pueden agregar a la escena para representar objetos. Los mapas fotorrealistas en 3D de la API de Maps JavaScript admiten la inclusión de modelos gLTF. Estos modelos se pueden escalar y rotar para permitir una mayor personalización.

Los modelos deben admitir las propiedades principales del PBR de glTF. No se admiten extensiones ni propiedades de extensiones.

Agregar un modelo

El constructor Model3DElement toma un conjunto de Model3DElementOptions que especifica las coordenadas LatLng del modelo y un conjunto de parámetros para admitir el posicionamiento del modelo.

Los modelos admiten las siguientes opciones:

  • position: Es la ubicación del modelo expresada en coordenadas de LatLng.
  • orientation: Es la rotación del sistema de coordenadas del modelo. Las rotaciones se aplican en el siguiente orden: balanceo, inclinación y, luego, rumbo.
  • scale: Ajusta el modelo en su espacio de coordenadas. El valor predeterminado es 1.
  • altitudeMode: Indica cómo se interpreta la altitud expresada en position.
  • src: Es la URL del modelo.

En el siguiente ejemplo, se muestra cómo agregar modelos al mapa y modificarlos con las opciones de personalización 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();

Agrega un modelo interactivo

Los modelos también admiten la interacción. En el siguiente ejemplo, se cambia la escala del modelo cuando se hace clic en él.

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