मॉडल

मॉडल, 3D ऐसेट होती हैं. इन्हें ऑब्जेक्ट दिखाने के लिए सीन में जोड़ा जा सकता है. Maps JavaScript API में फ़ोटोरियलिस्टिक 3D Maps, 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();