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

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

Modelle unterstützen die folgenden Optionen:

• position: Die Position des Modells in LatLng-Koordinaten.
• orientation: Die Drehung des Koordinatensystems des Modells. Drehungen 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',
    });

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

    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