मॉडल

प्लैटफ़ॉर्म चुनें: 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() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void init();

कोई इंटरैक्टिव मॉडल जोड़ना

मॉडल में इंटरैक्शन की सुविधा भी काम करती है. नीचे दिए गए उदाहरण में, क्लिक करने पर मॉडल का स्केल बदल जाता है.

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();