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 redimensionnés et pivotés pour permettre une personnalisation plus poussée.

Les modèles doivent être compatibles avec les propriétés de base du glTF PBR. 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 faciliter 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.

Important : Pour que les modèles s'affichent dans la scène, vous devez spécifier les options position et src.

Remarque : Si vous hébergez vos fichiers de modèle sur un site Web ou un serveur différent de votre application principale, vous devez vous assurer que votre application définit les en-têtes HTTP CORS appropriés.

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',
    });

    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();
index.js

Ajouter un modèle interactif

Les modèles sont également compatibles avec l'interaction. L'exemple suivant modifie l'échelle du modèle lorsque l'utilisateur clique dessus.

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',
    });

    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();
index.js