Modelos

Selecciona la plataforma: Android iOS JavaScript

Los modelos son elementos 3D que se pueden agregar a la escena para representar objetos. Los mapas 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 glTF PBR. No se admiten extensiones ni propiedades de extensión.

Agregar un modelo

El Model3DElement constructor 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 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: Escala el modelo en su espacio de coordenadas. El valor predeterminado es 1.
  • altitudeMode: Es la forma en que se interpreta la altitud expresada en position.
  • src: Es la URL del modelo.

En el siguiente ejemplo, se muestra cómo agregar un modelo al mapa y modificarlo con algunas de las opciones de personalización disponibles:

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void init();

Agregar 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() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();