<मॉडल-व्यूअर> वेब कॉम्पोनेंट

किसी वेबसाइट में 3D मॉडल जोड़ना मुश्किल हो सकता है. हालांकि, <model-viewer> को जोड़ना उतना ही आसान है जितना एचटीएमएल लिखना.

Joe Medley
Joe Medley

किसी वेबसाइट में 3D मॉडल जोड़ना एक पेचीदा काम है. 3D मॉडल को ऐसे व्यूअर में दिखाया जाता है जो सभी ब्राउज़र पर रिस्पॉन्सिव तरीके से काम कर सकता है. इनमें स्मार्टफ़ोन, डेस्कटॉप या नए हेड-माउंटेड डिसप्ले भी शामिल हैं. व्यूअर को परफ़ॉर्मेंस और रेंडरिंग क्वालिटी के लिए प्रोग्रेसिव एन्हैंसमेंट की सुविधा इस्तेमाल करनी चाहिए. यह सभी डिवाइसों पर इस्तेमाल किए जा सकने वाले उदाहरणों के साथ काम करना चाहिए. इनमें पुराने और कम क्षमता वाले स्मार्टफ़ोन से लेकर, ऑगमेंटेड रिएलिटी (एआर) की सुविधा वाले नए डिवाइस शामिल हैं. यह नई टेक्नोलॉजी से अप-टू-डेट रहना चाहिए. यह अच्छी तरह से काम करता हो और इसे ऐक्सेस किया जा सकता हो. हालांकि, ऐसा व्यूअर बनाने के लिए 3D प्रोग्रामिंग की खास जानकारी ज़रूरी है. साथ ही, यह वेब डेवलपर के लिए चुनौती हो सकती है, जो तीसरे पक्ष की होस्टिंग सेवा का इस्तेमाल करने के बजाय, खुद के मॉडल होस्ट करना चाहते हैं.

हालांकि, <model-viewer> वेब कॉम्पोनेंट की मदद से, अपनी साइट पर मॉडल को होस्ट करते हुए, वेब पेज पर 3D मॉडल को साफ़ तौर पर जोड़ा जा सकता है. इस कॉम्पोनेंट का मकसद, आपकी वेबसाइट में मौजूद टेक्नोलॉजी और प्लैटफ़ॉर्म को समझे बिना, उसमें 3D मॉडल जोड़ने की सुविधा चालू करना है. वेब कॉम्पोनेंट रिस्पॉन्सिव डिज़ाइन की सुविधा देता है. साथ ही, कुछ डिवाइसों पर ऑगमेंटेड रिएलिटी (एआर) जैसे इस्तेमाल के उदाहरण भी उपलब्ध हैं. इसमें सुलभता, रेंडरिंग क्वालिटी, और इंटरैक्टिविटी से जुड़ी सुविधाएं शामिल हैं.

वेब कॉम्पोनेंट क्या है?

वेब कॉम्पोनेंट, स्टैंडर्ड वेब प्लैटफ़ॉर्म की सुविधाओं से बनाया गया कस्टम एचटीएमएल एलिमेंट होता है. वेब कॉम्पोनेंट सभी इंटेंट और मकसद के लिए, एक स्टैंडर्ड एलिमेंट की तरह काम करता है. इसमें एक यूनीक टैग होता है. इसमें प्रॉपर्टी और तरीके हो सकते हैं. साथ ही, यह इवेंट को ट्रिगर कर सकता है और उनका जवाब दे सकता है. कम शब्दों में, किसी भी वेब कॉम्पोनेंट का इस्तेमाल करने के लिए, आपको कुछ खास जानने की ज़रूरत नहीं है.

इस लेख में, <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> दस्तावेज़ देखें. इनमें ग्राउंड पर प्रोजेक्ट किया गया स्काईबॉक्स जोड़ने के साथ-साथ, ऐनिमेशन वाले टेक्सचर और हॉटस्पॉट बनाने की सुविधा भी शामिल है.