Modèles

Sélectionnez une plate-forme : Android iOS JavaScript

Les modèles sont des assets 3D qui peuvent être ajoutés à une scène pour représenter des objets. Les cartes 3D de l'API Maps JavaScript permettent d'inclure des 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 PBR glTF. Aucune extension ni propriété d'extension n'est acceptée.

Ajouter un modèle

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

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 : roulis, inclinaison, puis cap.
  • scale : met à l'échelle le modèle dans son espace de coordonnées. La valeur par défaut est 1.
  • altitudeMode : interprétation de l'altitude exprimée en position.
  • src : URL du modèle.

L'exemple suivant montre comment ajouter un modèle à la carte et le modifier à l'aide de certaines des options de personnalisation 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();

Ajouter un modèle interactif

Les modèles sont également compatibles avec l'interaction. L'exemple suivant modifie l'échelle du modèle lorsqu'il est cliqué.

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