Model

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

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

Menambahkan model

Konstruktor Model3DElement menggunakan sekumpulan Model3DElementOptions yang menentukan koordinat LatLng model dan sekumpulan parameter untuk mendukung pemosisian 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 ketinggian yang dinyatakan dalam position ditafsirkan.
  • src: URL model.

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

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

Menambahkan model interaktif

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

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