Modelle

Plattform auswählen: Android iOS JavaScript

Modelle sind 3D-Assets, die einer Szene hinzugefügt werden können, um Objekte darzustellen. Die 3D-Karten in Maps JavaScript API unterstützen das Einbinden von gLTF-Modellen. Diese Modelle können skaliert und gedreht werden, um weitere Anpassungen zu ermöglichen.

Die Modelle müssen die zentralen Eigenschaften des glTF-PBR unterstützen. Erweiterungen oder Erweiterungsattribute werden nicht unterstützt.

Modell hinzufügen

Für den Model3DElement-Konstruktor werden eine Reihe von Model3DElementOptions angegeben, mit denen die LatLng-Koordinaten des Modells sowie eine Reihe von Parametern für die Positionierung des Modells festgelegt werden.

Modelle unterstützen die folgenden Optionen:

• position: Der Standort des Modells, ausgedrückt in LatLng-Koordinaten.
• orientation: Die Drehung des Koordinatensystems des Modells. Drehungen werden in der folgenden Reihenfolge angewendet: Rollen, Neigen und dann Richtung.
• scale: Skaliert das Modell in seinem Koordinatenraum. Der Standardwert ist 1.
• altitudeMode: Gibt an, wie die in position angegebene Höhe interpretiert wird.
• src: Die URL des Modells.

Wichtig: Damit Modelle in der Szene gerendert werden, müssen Sie sowohl die Option position als auch die Option src angeben.

Hinweis: Wenn Sie Ihre Modelldateien auf einer anderen Website oder einem anderen Server als Ihre Hauptanwendung hosten, müssen Sie dafür sorgen, dass Ihre Anwendung die richtigen CORS-HTTP-Header festlegt.

Im folgenden Beispiel wird gezeigt, wie Sie der Karte ein Modell hinzufügen und es mit einigen der verfügbaren Anpassungsoptionen ändern:

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

Interaktives Modell hinzufügen

Modelle unterstützen auch Interaktionen. Im folgenden Beispiel wird die Größe des Modells geändert, wenn darauf geklickt wird.

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