किसी वेबसाइट में 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">
रिस्पॉन्सिव डिज़ाइन
यह कॉम्पोनेंट कुछ तरह के रिस्पॉन्सिव डिज़ाइन को हैंडल करता है, जिन्हें मोबाइल और डेस्कटॉप, दोनों के लिए स्केल किया जाता है. यह किसी पेज पर एक से ज़्यादा इंस्टेंस भी मैनेज कर सकता है. साथ ही, मॉडल नहीं दिखने पर बैटरी पावर और जीपीयू साइकल बचाने के लिए, इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करता है.
पोस्टर इमेज बनाने के लिए पहले बताए गए एडिटर का इस्तेमाल करने से, उस इमेज को 3D रेंडर से मैच करने में मदद मिलती है. भले ही, <model-viewer> का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) अलग-अलग स्क्रीन साइज़ के हिसाब से हो.
ज़्यादा सुविधाएं
ज़्यादा बेहतर सुविधाओं का डेमो देखने के लिए, <model-viewer> का दस्तावेज़ देखें.
इनमें ग्राउंड-प्रोजेक्ट वाला स्काईबॉक्स जोड़ने, ऐनिमेटेड टेक्सचर, और हॉटस्पॉट बनाने की सुविधा शामिल है.