मॉडल

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

मॉडल, 3D ऐसेट होते हैं. इन्हें सीन में जोड़ा जा सकता है, ताकि ऑब्जेक्ट दिखाए जा सकें. Maps JavaScript API में मौजूद फ़ोटोरेलिस्टिक 3D मैप में, gLTF मॉडल शामिल किए जा सकते हैं. इन मॉडल को अपनी पसंद के मुताबिक बनाने के लिए, इनका साइज़ बदला जा सकता है और इन्हें घुमाया जा सकता है.

मॉडल में glTF PBR की मुख्य प्रॉपर्टी काम करनी चाहिए. एक्सटेंशन या एक्सटेंशन प्रॉपर्टी इस्तेमाल नहीं की जा सकतीं.

कोई मॉडल जोड़ें

Model3DElement कंस्ट्रक्टर, Model3DElementOptions का एक सेट लेता है. यह सेट, मॉडल के LatLng कोऑर्डिनेट और मॉडल को पोज़िशन करने के लिए पैरामीटर का एक सेट तय करता है.

मॉडल में ये विकल्प काम करते हैं:

  • position: मॉडल की जगह, जिसे LatLng कोऑर्डिनेट में दिखाया गया है.
  • orientation: मॉडल के कोऑर्डिनेट सिस्टम का रोटेशन. रोटेशन, इस क्रम में लागू होते हैं: रोल, टिल्ट, और फिर हेडिंग.
  • scale: मॉडल को उसके कोऑर्डिनेट स्पेस में स्केल करता है. डिफ़ॉल्ट वैल्यू 1 है.
  • altitudeMode: position में बताई गई ऊंचाई को कैसे समझा जाता है.
  • src: मॉडल का यूआरएल.

यहां दिए गए उदाहरण में, मैप में मॉडल जोड़ने और उन्हें पसंद के मुताबिक बनाने के लिए उपलब्ध विकल्पों का इस्तेमाल करके उनमें बदलाव करने का तरीका बताया गया है:

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