Modeller

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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

Modeller, glTF PBR'nin temel özelliklerini desteklemelidir. Hiçbir uzantı veya uzantı özelliği desteklenmez.

Model ekle

Model3DElement kurucusu, modelin LatLng koordinatlarını ve modelin konumlandırılmasını desteklemek için bir parametre grubunu belirten bir Model3DElementOptions grubu alır.

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

• position: Modelin LatLng koordinatlarıyla ifade edilen konumu.
• orientation: Modelin koordinat sisteminin dönüşü. Döndürme işlemleri şu sırayla uygulanır: yuvarlama, yatırma ve yönlendirme.
• scale: Modeli koordinat alanında ölçeklendirir. Varsayılan değer: 1.
• altitudeMode: position cinsinden belirtilen rakım nasıl yorumlanır?
• src: Modelin URL'si.

Aşağıdaki örnekte, haritaya model ekleme ve mevcut özelleştirme seçeneklerini kullanarak modelleri değiştirme gösterilmektedir:

async function init() {
  const { Map3DElement, MapMode, Model3DElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);
  
  const models = [
    // A model with regular settings.
    {
      position: {lat: 37.76, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
    },
    // Scaled down model.
    {
      position: {lat: 37.75, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 0.8,
    },
    // Scaled up model.
    {
      position: {lat: 37.735, lng: -121.63, altitude: 0},
      orientation: {tilt: 270},
      scale: 1.2,
    },
    // A model with an additional transformation applied.
    {
      position: {lat: 37.72, lng: -121.63, altitude: 0},
      orientation: {tilt: 270, roll: 90},
    },
    // Non-clamped to the ground model.
    {
      position: {lat: 37.71, lng: -121.63, altitude: 1000},
      altitudeMode: 'RELATIVE_TO_GROUND',
      orientation: {tilt: 270},
    },
  ];

  for (const {position, altitudeMode, orientation, scale} of models) {
    const model = new Model3DElement({
      src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
      position,
      altitudeMode,
      orientation,
      scale,
    });

    map.append(model);
  }
}

init();

Etkileşimli model ekleme

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

async function init() {
  const { Map3DElement, MapMode, Model3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 37.7438, lng: -121.5088, altitude: 1800},
    heading: -90,
    tilt: 90,
    mode: MapMode.SATELLITE,
  });

  document.body.append(map);

  const model = new Model3DInteractiveElement({
    src: 'https://storage.googleapis.com/maps-web-api.appspot.com/gltf/windmill.glb',
    position: {lat: 37.76, lng: -121.63, altitude: 0},
    scale: 1.0,
  });

  model.addEventListener('gmp-click', (event) => {
    model.scale = (Math.random() * (1 - 2)).toFixed(2);

  });

  map.append(model);
}

init();