मॉडल

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