Modeller

Platform seçin: Android iOS JavaScript

Modeller, nesneleri temsil etmek için sahneye eklenebilen 3D öğelerdir. Maps JavaScript API'deki gerçekçi 3D Haritalar, gLTF modellerinin eklenmesini 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şturucusu, modelin LatLng koordinatlarını belirten bir Model3DElementOptions kümesi ve modelin konumlandırılmasını 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öndürülmesi. 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 bunları mevcut özelleştirme seçeneklerini kullanarak 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 örnekte, tıklandığında modelin ölçeği değiştirilir.

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