<model-viewer> की मदद से, वेब पर 3D मॉडल जोड़ना

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

आपको क्या बनाना है

ऐसी वेबसाइट जिसमें इंटरैक्टिव 3D मॉडल मौजूद हो और एआर होलोग्राम दिखाने की सुविधा हो

आपको क्या सीखने को मिलेगा

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

आपको इन चीज़ों की ज़रूरत होगी

  • वेब ब्राउज़र. हमारा सुझाव है कि आप Chrome का इस्तेमाल करें. हालांकि, कोई भी मॉडर्न ब्राउज़र (Firefox, Safari, Edge) काम करेगा.
  • Node.js और टेक्स्ट एडिटर या Glitch का ऐक्सेस.
  • एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools की बुनियादी जानकारी.

यह कोडलैब, <model-viewer> और 3D मॉडल पर फ़ोकस करता है. इसमें काम के न होने वाले कॉन्सेप्ट और कोड ब्लॉक को हटा दिया जाता है. साथ ही, इन्हें सिर्फ़ कॉपी और चिपकाने के लिए उपलब्ध कराया जाता है.

पहला विकल्प - Glitch

अपने प्रोजेक्ट को होस्ट करने और बदलाव देखने के लिए, Glitch जैसे ऑनलाइन कोड एडिटिंग टूल का इस्तेमाल किया जा सकता है.

Glitch में काम शुरू करने के लिए, यहां दिए गए बटन पर क्लिक करें:

पहले से लोड किया गया Glitch एनवायरमेंट खोलें

इसके बाद, Glitch पर कोड एडिटर का इस्तेमाल करके अपनी फ़ाइलों में बदलाव किया जा सकता है. जब आप तैयार हों, तब "लाइव दिखाएं" बटन का इस्तेमाल करके, अपना ऐप्लिकेशन दिखाना शुरू करें. इसे अभी आज़माएं. आपको यह पेज दिखेगा:

दूसरा विकल्प - लोकल सर्वर

लोकल सर्वर की मदद से, अपने पसंदीदा कोड एडिटर का इस्तेमाल किया जा सकता है.

सर्वर इंस्टॉल करना

हमें लोकल वेब पेजों को दिखाने का तरीका चाहिए होगा. इसके लिए, Node.js और serve का इस्तेमाल किया जा सकता है. यह स्टैटिक कॉन्टेंट का एक आसान सर्वर है.

इसे अपने ऑपरेटिंग सिस्टम पर इंस्टॉल करने के निर्देश पाने के लिए, Node.js की वेबसाइट देखें. Node.js इंस्टॉल करने के बाद, serve को इंस्टॉल करने के लिए यह कमांड चलाएं:

npm install -g serve

कोड डाउनलोड करें

शुरुआत करने के लिए एक टेंप्लेट और सभी सैंपल ऐसेट डाउनलोड की जा सकती हैं. यहां दिए गए लिंक पर क्लिक करें. इसके बाद, कॉन्टेंट को उस डायरेक्ट्री में अनज़िप करें जिसमें आपको अपना प्रोजेक्ट रखना है:

सोर्स कोड डाउनलोड करना

इसके अलावा, git का इस्तेमाल करके डेटा स्टोर करने की जगह को क्लोन करें:

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

सर्वर चलाना

ऊपर निकाली गई टेंप्लेट डायरेक्ट्री से (या अगर आपने git का इस्तेमाल किया है, तो क्लोन की गई डायरेक्ट्री में), वेब सर्वर शुरू करने के लिए serve कमांड चलाएं:

उस पते पर जाएं. ऊपर दिए गए स्क्रीनशॉट में, यह http://localhost:5000 है. हालांकि, यह आपकी मशीन पर अलग हो सकता है. यहां आपको एक बहुत ही आसान शुरुआती पॉइंट दिखेगा:

हम index.html फ़ाइल में बदलाव करके शुरुआत करेंगे. इसके लिए, Glitch के वेब एडिटर का इस्तेमाल किया जा सकता है. अगर लोकल सर्वर का इस्तेमाल किया जा रहा है, तो अपने पसंदीदा कोड एडिटर का इस्तेमाल करें.

<model-viewer> लाइब्रेरी जोड़ना

<model-viewer> का इस्तेमाल करने के लिए, हमें JavaScript फ़ाइलों का एक सेट शामिल करना होगा.

यहां दिए गए सेक्शन में, <model-viewer> लाइब्रेरी को आपके पेज में जोड़ा गया है. नीचे दिए गए कोड को <body> के आखिर में चिपकाएं.

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

हमने सिर्फ़ लाइब्रेरी जोड़ी हैं, कॉन्टेंट में कोई बदलाव नहीं किया है. पेज को रीफ़्रेश करने पर, आपको वही कॉन्टेंट दिखेगा. DevTools कंसोल खोलने पर, आपको WebXR API के मौजूद न होने के बारे में कुछ चेतावनियां दिख सकती हैं. हालांकि, जब तक यह एपीआई पूरी तरह से रिलीज़ नहीं हो जाता, तब तक ऐसा होना सामान्य है.

ज़्यादा से ज़्यादा डिवाइसों के साथ काम करने की सुविधा

<model-viewer> कॉम्पोनेंट, कई मॉडर्न ब्राउज़र के साथ काम करता है. हालांकि, अगर आपको अपने पेज के लिए ज़्यादा ब्राउज़र इस्तेमाल करने हैं, तो अतिरिक्त पॉलीफ़िल शामिल किए जा सकते हैं.

सुझाए गए सभी कीवर्ड यहां दिए गए हैं. इनसे आपको सभी मॉडर्न ब्राउज़र पर बेहतरीन अनुभव देने में मदद मिलेगी. ज़्यादा जानकारी के लिए, <model-viewer> पॉलीफ़िल का दस्तावेज़ देखें.

नीचे दिए गए कोड को <head> में चिपकाएं.

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

<model-viewer> जोड़ना

अब पेज में <model-viewer> टैग जोड़ते हैं, ताकि हम कुछ 3D मॉडल देख सकें! मौजूदा <p> एलिमेंट की जगह यह कोड डालें:

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

यहां सिर्फ़ दो एट्रिब्यूट के बारे में बताया गया है:

  • src एट्रिब्यूट से यह पता चलता है कि 3D मॉडल कहां से लोड करना है. इस उदाहरण में, हमने Poly का Astronaut मॉडल इस्तेमाल किया है. इसे CC-BY लाइसेंस के तहत उपलब्ध कराया गया है.
  • alt एट्रिब्यूट में, मॉडल के बारे में जानकारी देने वाला ऐसा टेक्स्ट शामिल होता है जिसे ऐक्सेस किया जा सकता है.

आपको दिख सकता है कि इन दोनों एट्रिब्यूट की वैल्यू, img टैग के एट्रिब्यूट की वैल्यू से मिलती-जुलती हैं.

पेज को फिर से लोड करने पर, अंतरिक्ष यात्री दिखेगा:

बढ़िया! अब आपके पास वेब पर 3D मॉडल है!


यहां दिए गए चरणों में, हम ज़्यादा इंटरैक्टिविटी और मोशन का इस्तेमाल करेंगे. साथ ही, एलिमेंट के दिखने के तरीके में बदलाव करेंगे और एआर का इस्तेमाल करेंगे.

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

इसके लिए, <model-viewer> एलिमेंट में auto-rotate और camera-controls एट्रिब्यूट जोड़ें. 

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

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

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

अब हमारे पास कुछ मोशन है. आइए, मॉडल को और ज़्यादा दिलचस्प बनाने के लिए, उसके लुक में बदलाव करें.

मॉडल अपडेट करना

इनमें से कुछ बदलाव (खास तौर पर, रोशनी में किए गए बदलाव) कुछ मॉडल पर बेहतर तरीके से दिखेंगे. सबसे पहले, src एट्रिब्यूट को अपडेट करके, नए मॉडल पर ले जाते हैं: third_party/DamagedHelmet/DamagedHelmet.gltf (Sketchfab पर क्रिएटिव कॉमंस एट्रिब्यूशन-नॉनकमर्शियल लाइसेंस के तहत रिलीज़ किया गया). अब पूरे एलिमेंट का सोर्स यह होना चाहिए:

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

इस मॉडल में, हम जल्द ही होने वाले कुछ बदलावों को दिखाएंगे!

बैकग्राउंड का रंग बदलना

सबसे पहले, बैकग्राउंड का रंग बदलते हैं, ताकि मॉडल पेज पर अलग से दिखे. अपने <model-viewer> टैग में यह एट्रिब्यूट जोड़ें:

background-color="#70BCD1"

एनवायरमेंट मैप सेट करना

एनवायरमेंट मैप का इस्तेमाल, मॉडल से दिखने वाले सीन को शामिल करने और लाइटिंग कॉन्फ़िगरेशन तय करने के लिए किया जाता है. डिफ़ॉल्ट लाइटिंग बहुत अच्छी होती है. साथ ही, यह ARCore के Scene Viewer की लाइटिंग के साथ काम करती है. हालांकि, कभी-कभी आपको कस्टम एनवायरमेंट की ज़रूरत पड़ सकती है. इसके अलावा, आपको ऐसे नतीजे पाने के लिए लाइटिंग की ज़रूरत पड़ सकती है जो आपको चाहिए. आइए, एनवायरमेंट इमेज studio_small_07_1k.hdr एट्रिब्यूट की वैल्यू तय करें. यह इमेज hdrihaven.com से ली गई है.

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

शैडो जोड़ना

ऑब्जेक्ट की परछाई से सीन को ज़्यादा गहराई मिलती है. हमारे <model-viewer> एलिमेंट में यह एट्रिब्यूट जोड़ने पर, शैडो दिखेगी:

shadow-intensity="1"

लाइटिंग की इंटेंसिटी बदलना

मॉडल थोड़ा डार्क है. इसलिए, हम रोशनी को थोड़ा बढ़ा देते हैं, ताकि हम ज़्यादा जानकारी देख सकें. डिफ़ॉल्ट स्टेज लाइटिंग और जोड़े गए एनवायरनमेंट मैप की लाइटिंग, दोनों को अलग-अलग अडजस्ट किया जा सकता है. यह जोड़ें:

stage-light-intensity="3" environment-intensity="2"

ये बदलाव बहुत छोटे थे, लेकिन अब मॉडल काफ़ी बेहतर दिख रहा है!

इसके बाद, हम डिसप्ले के कुछ अन्य मोड के बारे में जानेंगे.

ज़्यादा से ज़्यादा डिवाइसों में ऑगमेंटेड रिएलिटी (एआर) की सुविधा उपलब्ध है. इनमें से कुछ मोड को ट्रिगर करना मुश्किल होता है या इसके लिए खास कोड की ज़रूरत होती है. हालांकि, <model-viewer> आपके लिए इन सभी मुश्किलों को हल कर सकता है!

ARCore का Scene Viewer

जिन डिवाइसों पर <model-viewer> काम करता है उन पर ARCore के Scene Viewer को ट्रिगर किया जा सकता है. अपने <model-viewer> एलिमेंट में ar एट्रिब्यूट जोड़ें. बस, आपको इतना ही करना है!

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

अब अगर इस सुविधा को, ARCore के नए वर्शन के साथ काम करने वाले किसी डिवाइस पर देखा जाता है, तो आपको एक और आइकॉन दिखेगा. यह आइकॉन, नीचे दी गई इमेज में दिखाया गया है. इस पर क्लिक करने से, आपका मॉडल सीन एक्सप्लोरर में खुल जाएगा!

अन्य डिवाइस - iOS Quick Look, Magic Leap, WebXR

कई अन्य डिवाइसों के लिए, कुछ और काम करना ज़रूरी है.

iOS पर, ios-src एट्रिब्यूट की मदद से, 3D मॉडल का एक और USDZ वर्शन तय किया जा सकता है. यह वर्शन iOS पर ज़रूरी होता है. इस एट्रिब्यूट की वैल्यू देने पर, iOS के साथ काम करने वाले डिवाइसों पर मॉडल के लिए, एआर क्विक लुक का स्टैंडर्ड आइकॉन दिखेगा. USDZ के बारे में ज़्यादा जानने के लिए, Apple का डेवलपर दस्तावेज़ देखें.

Magic Leap डिवाइसों पर, magic-leap एट्रिब्यूट से एआर की सुविधा चालू हो जाएगी. ध्यान दें कि आपको prismatic.js लाइब्रेरी भी शामिल करनी होगी. यह लाइब्रेरी, वैकल्पिक पॉलीफ़िल में शामिल होती है, लेकिन इस पर टिप्पणी की गई होती है. साथ ही, 3D मॉडल .glb फ़ाइल (न कि .gltf) होनी चाहिए.

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

कैमरे के शुरुआती एंगल और पोज़िशन को कंट्रोल किया जा सकता है. इस कंट्रोल की मदद से, हम लोगों को हेलमेट का बेहतर डिफ़ॉल्ट व्यू दिखा पाते हैं. इस स्निपेट को अपने <model-viewer> टैग में जोड़ें:

camera-orbit="-20deg 75deg 2m"

इन मॉडल का इस्तेमाल, आपके अन्य कॉन्टेंट के साथ भी किया जा सकता है. इनमें रिस्पॉन्सिव पेज पर मौजूद कॉन्टेंट भी शामिल है. रिस्पॉन्सिव वेब पेज बनाना, इस कोडलैब के दायरे से बाहर है. हालांकि, ज़्यादा जानकारी के लिए रिस्पॉन्सिव वेब डिज़ाइन (स्क्रीन के हिसाब से साइज़ बदलने वाला वेब डिज़ाइन) के बारे में बुनियादी बातें पढ़ें.

हमने अपनी रेपो में एक सैंपल पेज शामिल किया है. डेस्कटॉप जैसे वाइडस्क्रीन पर responsive.html देखें:

मोबाइल डिवाइस जैसे छोटे व्यूपोर्ट में दिखने वाला पेज:

आपने वेब पेज में 3D कॉन्टेंट एम्बेड कर दिया है! बहुत अच्छे!

आगे क्या करना है?

कॉन्फ़िगरेशन के लिए कई और विकल्प मौजूद हैं. ज़्यादा जानकारी के लिए, हमारा ऑनलाइन दस्तावेज़ या कोड देखें.

अपने मॉडल की पहचान करने के बाद, आपको इन बातों पर ध्यान देना चाहिए:

  • कुछ मॉडल काफ़ी बड़े हो सकते हैं. ऐसे मामलों में, <model-viewer> बेहतरीन अनुभव देने के लिए कई तरीके उपलब्ध कराता है. ज़्यादा जानकारी के लिए, लेज़ी लोडिंग का दस्तावेज़ पेज देखें.
  • ऐनिमेट किए गए मॉडल काफ़ी मज़ेदार हो सकते हैं! अपने मॉडल में तय किए गए ऐनिमेशन को चालू करने (और उनके बीच स्विच करने) के बारे में ज़्यादा जानने के लिए, हमारा ऐनिमेशन पेज देखें.
  • यह अब भी वेब है. मॉडल को आपके वेब पेजों में एम्बेड किया जा सकता है, ताकि आपके कॉन्टेंट को बेहतर बनाया जा सके!

हमारी डेवलपमेंट प्रोसेस, GitHub पर उपलब्ध है. आपका जवाब पाकर हमें खुशी होगी!