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 der Maps JavaScript API unterstützen die Einbindung von gLTF-Modellen. Diese Modelle können skaliert und gedreht werden, um weitere Anpassungen zu ermöglichen.

Die Modelle müssen die Kerneigenschaften des glTF PBR unterstützen. Erweiterungen oder Erweiterungseigenschaften werden nicht unterstützt.

Modell hinzufügen

Der Model3DElement -Konstruktor verwendet eine Reihe von Model3DElementOptions, die die LatLng -Koordinaten des Modells angeben, sowie eine Reihe von Parametern, um die Positionierung des Modells zu unterstützen.

Modelle unterstützen die folgenden Optionen:

• position: Die Position des Modells in LatLng-Koordinaten.
• orientation: Die Drehung des Koordinatensystems des Modells. Rotationen werden in der folgenden Reihenfolge angewendet: Rollen, Neigen und dann Kurs.
• scale: Skaliert das Modell in seinem Koordinatenraum. Der Standardwert ist 1.
• altitudeMode: Wie die in position angegebene Höhe interpretiert wird.
• src: Die URL des Modells.

Wichtig: Damit Modelle in der Szene gerendert werden können, müssen Sie sowohl die Option position als auch 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',
        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();
index.js

Interaktives Modell hinzufügen

Modelle unterstützen auch Interaktionen. Im folgenden Beispiel wird die Skalierung 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',
        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();
index.js