मॉडल

प्लैटफ़ॉर्म चुनें: 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',
        gestureHandling: 'COOPERATIVE',
    });

    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',
        gestureHandling: 'COOPERATIVE',
    });

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