مدل ها

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

مدل‌ها، دارایی‌های سه‌بعدی هستند که می‌توانند برای نمایش اشیاء به صحنه اضافه شوند. نقشه‌های سه‌بعدی در Maps JavaScript API از گنجاندن مدل‌های gLTF پشتیبانی می‌کنند. این مدل‌ها را می‌توان مقیاس‌بندی و چرخش داد تا امکان سفارشی‌سازی بیشتر فراهم شود.

مدل‌ها باید از ویژگی‌های اصلی glTF PBR پشتیبانی کنند. هیچ افزونه یا ویژگی افزونه‌ای پشتیبانی نمی‌شود.

اضافه کردن مدل

سازنده‌ی Model3DElement مجموعه‌ای از Model3DElementOptions را می‌گیرد که مختصات LatLng مدل و مجموعه‌ای از پارامترها را برای پشتیبانی از موقعیت‌یابی مدل مشخص می‌کند.

مدل‌ها از گزینه‌های زیر پشتیبانی می‌کنند:

  • position : موقعیت مدل که با مختصات LatLng بیان می‌شود.
  • orientation : چرخش سیستم مختصات مدل. چرخش‌ها به ترتیب زیر اعمال می‌شوند: غلتش، کج کردن و سپس جهت‌گیری.
  • scale : مدل را در فضای مختصات خود مقیاس‌بندی می‌کند. مقدار پیش‌فرض 1 است.
  • altitudeMode : نحوه تفسیر ارتفاع بیان شده در position .
  • src : آدرس اینترنتی (URL) مدل.

مثال زیر نحوه‌ی افزودن مدل‌ها به نقشه و تغییر آنها با استفاده از گزینه‌های سفارشی‌سازی موجود را نشان می‌دهد:

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

یک مدل تعاملی اضافه کنید

مدل‌ها همچنین از تعامل پشتیبانی می‌کنند. مثال زیر مقیاس مدل را هنگام کلیک تغییر می‌دهد.

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