Model

Pilih platform: Android iOS JavaScript

Model adalah aset 3D yang dapat ditambahkan ke adegan untuk mewakili objek. Peta 3D di Maps JavaScript API mendukung penyertaan model gLTF. Model ini dapat diskalakan dan diputar untuk memungkinkan penyesuaian lebih lanjut.

Model harus mendukung properti inti glTF PBR. Tidak ada ekstensi atau properti ekstensi yang didukung.

Menambahkan model

Konstruktor Model3DElement menggunakan sekumpulan Model3DElementOptions yang menentukan LatLng koordinat model dan sekumpulan parameter untuk mendukung penempatan model.

Model mendukung opsi berikut:

  • position: Lokasi model yang dinyatakan dalam koordinat LatLng.
  • orientation: Rotasi sistem koordinat model. Rotasi diterapkan dalam urutan berikut: roll, tilt, lalu heading.
  • scale: Menskalakan model dalam ruang koordinatnya. Nilai defaultnya adalah 1.
  • altitudeMode: Cara penafsiran ketinggian yang dinyatakan dalam position.
  • src: URL model.

Contoh berikut menunjukkan cara menambahkan model ke peta dan mengubahnya menggunakan beberapa opsi penyesuaian yang tersedia:

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

Menambahkan model interaktif

Model juga mendukung interaksi. Contoh berikut mengubah skala model saat diklik.

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