किसी वेबसाइट पर 3D मॉडल जोड़ना मुश्किल हो सकता है. हालांकि, <model-viewer> का इस्तेमाल करना एचटीएमएल लिखने जितना आसान है.
किसी वेबसाइट पर 3D मॉडल जोड़ना मुश्किल होता है. 3D मॉडल को आम तौर पर ऐसे व्यूअर में दिखाया जाता है जो स्मार्टफ़ोन, डेस्कटॉप या सिर पर पहनने वाले नए डिसप्ले डिवाइसों के साथ-साथ सभी ब्राउज़र पर काम कर सकता है. व्यूअर को परफ़ॉर्मेंस और रेंडरिंग क्वालिटी के लिए, प्रोग्रेसिव एन्हांसमेंट की सुविधा के साथ काम करना चाहिए. यह पुराने और कम पावर वाले स्मार्टफ़ोन से लेकर, ऑगमेंटेड रिएलिटी (एआर) की सुविधा वाले नए डिवाइसों तक, सभी डिवाइसों पर इस्तेमाल के उदाहरणों के साथ काम करना चाहिए. यह मौजूदा टेक्नोलॉजी के हिसाब से अप-टू-डेट होना चाहिए. यह बेहतर परफ़ॉर्मेंस वाला और ऐक्सेस करने में आसान होना चाहिए. हालांकि, ऐसा व्यूअर बनाने के लिए 3D प्रोग्रामिंग की खास स्किल की ज़रूरत होती है. साथ ही, यह उन वेब डेवलपर के लिए एक चुनौती हो सकती है जो तीसरे पक्ष की होस्टिंग सेवा का इस्तेमाल करने के बजाय, अपने मॉडल खुद होस्ट करना चाहते हैं.
हालांकि, <model-viewer> वेब कॉम्पोनेंट की मदद से,
किसी वेब पेज पर 3D मॉडल को
डिक्लेरेटिव तरीके से जोड़ा जा सकता है. साथ ही, मॉडल को अपनी साइट पर होस्ट किया जा सकता है.
इस कॉम्पोनेंट का मकसद, आपकी वेबसाइट पर 3D मॉडल जोड़ने की सुविधा देना है. इसके लिए, आपको इसके पीछे की टेक्नोलॉजी और प्लैटफ़ॉर्म को समझने की ज़रूरत नहीं है.
वेब कॉम्पोनेंट, रिस्पॉन्सिव डिज़ाइन के साथ काम करता है. साथ ही, यह कुछ डिवाइसों पर ऑगमेंटेड रिएलिटी (एआर) जैसे इस्तेमाल के उदाहरणों के साथ भी काम करता है.
इसमें सुलभता, रेंडरिंग क्वालिटी, और इंटरैक्टिविटी की सुविधाएं शामिल हैं.
वेब कॉम्पोनेंट क्या होता है?
वेब कॉम्पोनेंट, एक कस्टम एचटीएमएल एलिमेंट होता है. इसे स्टैंडर्ड वेब प्लैटफ़ॉर्म की सुविधाओं से बनाया जाता है. वेब कॉम्पोनेंट, हर तरह से एक स्टैंडर्ड एलिमेंट की तरह काम करता है. इसका एक यूनीक टैग होता है. इसमें प्रॉपर्टी और तरीके हो सकते हैं. साथ ही, यह इवेंट को ट्रिगर कर सकता है और उनका जवाब दे सकता है. संक्षेप में, किसी भी वेब कॉम्पोनेंट का इस्तेमाल करने के लिए, आपको किसी खास जानकारी की ज़रूरत नहीं होती. <model-viewer> के लिए तो और भी कम जानकारी की ज़रूरत होती है.
इस लेख में, <model-viewer> की खास सुविधाओं के बारे में बताया गया है.
अगर आपको वेब कॉम्पोनेंट के बारे में ज़्यादा जानना है, तो webcomponents.org पर जाएं.
<model-viewer> क्या कर सकता है?
यहां दिए गए उदाहरणों से, <model-viewer> की कुछ क्षमताओं के बारे में पता चलता है.
बेसिक 3D मॉडल
3D मॉडल को एम्बेड करना, इस मार्कअप जितना आसान है. glb फ़ाइलों का इस्तेमाल करके, यह कॉम्पोनेंट किसी भी मुख्य ब्राउज़र पर काम करेगा.
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
यह कोड इस तरह रेंडर होता है:
मोशन और इंटरैक्टिविटी जोड़ना
auto-rotate और camera-controls एट्रिब्यूट, मोशन और उपयोगकर्ता को कंट्रोल करने की सुविधा देते हैं. इनके अलावा, और भी एट्रिब्यूट हो सकते हैं. एट्रिब्यूट की पूरी सूची के लिए दस्तावेज़ देखें.
<model-viewer src="shark.glb" auto-rotate camera-controls>
पोस्टर इमेज के साथ लोडिंग में देरी
सभी 3D मॉडल लोड होने में समय लेते हैं. poster एट्रिब्यूट जोड़ने का मतलब है कि जब तक मॉडल इस्तेमाल के लिए तैयार नहीं हो जाता, तब तक एक इमेज दिखाई जाएगी.
एडिटर का इस्तेमाल करके, एक ऐसी पोस्टर इमेज जनरेट की जा सकती है जो 3D रेंडर जैसी दिखेगी.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
रिस्पॉन्सिव डिज़ाइन
यह कॉम्पोनेंट, कुछ तरह के रिस्पॉन्सिव डिज़ाइन को हैंडल करता है. साथ ही, मोबाइल और डेस्कटॉप, दोनों के लिए स्केलिंग करता है. यह किसी पेज पर कई इंस्टेंस भी मैनेज कर सकता है. साथ ही, मॉडल न दिखने पर बैटरी पावर और जीपीयू साइकल को बचाने के लिए, Intersection Observer का इस्तेमाल करता है.
पोस्टर इमेज बनाने के लिए, पहले बताए गए एडिटर का इस्तेमाल करने से, वह इमेज 3D रेंडर से मैच हो जाती है. भले ही, <model-viewer> का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) अलग-अलग स्क्रीन साइज़ के हिसाब से बदलता हो.
ज़्यादा सुविधाएं
ज़्यादा ऐडवांस सुविधाओं के डेमो के लिए, <model-viewer> दस्तावेज़ देखें.
इनमें ग्राउंड-प्रोजेक्टेड स्काईबॉक्स जोड़ने, ऐनिमेटेड टेक्सचर, और हॉटस्पॉट बनाने की सुविधा शामिल है.