Modeller

Platform seçin: Android iOS JavaScript

Modeller, nesneleri temsil etmek için sahneye eklenebilen 3D öğelerdir. Maps JavaScript API'deki 3D Haritalar, gLTF modellerinin dahil edilmesini destekler. Bu modeller, daha fazla özelleştirme için ölçeklendirilebilir ve döndürülebilir.

Modeller, glTF PBR'nin temel özelliklerini desteklemelidir. Uzantılar veya uzantı özellikleri desteklenmez.

Model ekle

Model3DElement oluşturucu, modelin LatLng koordinatlarını belirten bir Model3DElementOptions kümesi ve modeli konumlandırmayı destekleyen bir parametre kümesi alır.

Modeller aşağıdaki seçenekleri destekler:

  • position: Modelin LatLng koordinatlarıyla ifade edilen konumu.
  • orientation: Modelin koordinat sisteminin dönüşü. Dönüşler şu sırayla uygulanır: yuvarlanma, eğilme ve yön.
  • scale: Modeli koordinat alanında ölçeklendirir. Varsayılan değer 1'dır.
  • altitudeMode: position cinsinden ifade edilen yüksekliğin nasıl yorumlandığı.
  • src: Modelin URL'si.

Aşağıdaki örnekte, haritaya model ekleme ve mevcut özelleştirme seçeneklerinden bazılarını kullanarak modeli değiştirme işlemi gösterilmektedir:

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

Etkileşimli model ekleme

Modeller etkileşimi de destekler. Aşağıdaki örnekte, tıklandığında modelin ölçeği değiştirilir.

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