<मॉडल-व्यूअर&gt की मदद से वेब पर 3D मॉडल जोड़ें;

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

आप क्या बनाएंगे

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

आप क्या #39;जानेंगे

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

आपको क्या चाहिए

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

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

पहला विकल्प - ग्लिच

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

ग्लिच में शुरू करने के लिए, नीचे दिए गए बटन पर क्लिक करें:

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

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

विकल्प 2 - लोकल सर्वर

स्थानीय सर्वर आपको अपने पसंदीदा कोड एडिटर का इस्तेमाल करने की सुविधा देगा.

सर्वर इंस्टॉल करें

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

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

npm install -g serve

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

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

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

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

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

सर्वर चलाना

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

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

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

<मॉडल-व्यूअर> लाइब्रेरी जोड़ें

&&t;मॉडल-व्यूअर> का इस्तेमाल करने के लिए हमें JavaScript फ़ाइलों का एक सेट शामिल करना होगा.

निम्न अनुभाग आपके पेज पर <model-दर्शक> लाइब्रेरी जोड़ता है. निम्न कोड को <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 एपीआई मौजूद न होने के बारे में कुछ चेतावनियां दिखें, लेकिन ये तब तक अपेक्षित हैं, जब तक कि वह एपीआई पूरी तरह रिलीज़ नहीं हो जाती.

काम करने की सुविधा को ज़्यादा से ज़्यादा बढ़ाना

बॉक्स से बाहर, <model-दर्शक> कई आधुनिक ब्राउज़र के साथ काम करता है. हालांकि, अगर आप उन ब्राउज़र की संख्या बढ़ाना चाहते हैं जिनके साथ आपका पेज काम कर सकता है, तो आप अतिरिक्त पॉलीफ़िल शामिल कर सकते हैं.

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

निम्न कोड को <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>-->

<मॉडल-व्यूअर जोड़ें>

अब CANNOT TRANSLATE मौजूदा <p> एलिमेंट को नीचे दिए गए कोड से बदलें:

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

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

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

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

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

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


इन चरणों में, हम ज़्यादा इंटरैक्टिव और मोशन के साथ प्रयोग करेंगे, एलिमेंट की दिखावट को बदलेंगे, और अपने हाथ के जेस्चर (हाव-भाव) को गहराई से देखेंगे.

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

ऐसा करने के लिए, यूआरएल को <model-दर्शक और यूआरएल में 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>

जब आप पेज को रीफ़्रेश करेंगे, तो एस्ट्रोनॉट धीरे-धीरे स्पिनिंग करेगा. अगर आप मॉडल को क्लिक करने और उसे माउस की मदद से खींचने की कोशिश करते हैं या अगर आप{0}#39;अपनी उंगली को खींचकर टच किए जा सकने वाले डिवाइस पर हैं) तो मॉडल बदल जाएगा.

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

अब जब हम कुछ मोशन पर हैं, तो आइए देखें कि मॉडल को कैसे आकर्षक बनाया जाए.

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

इनमें से कुछ (खास तौर पर रोशनी में होने वाले बदलाव) कुछ मॉडल पर सबसे अच्छी तरह दिखेंगे. सबसे पहले, आइए 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-दर्शक> टैग में यह एट्रिब्यूट जोड़ें:

background-color="#70BCD1"

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

एनवायरमेंट मैप का इस्तेमाल एक ऐसा एनक्लोज़िंग सीन देने के लिए किया जाता है, जो मॉडल से दिखता हो और रोशनी के कॉन्फ़िगरेशन के बारे में बताता हो. डिफ़ॉल्ट रोशनी बहुत अच्छी है (और यह ARCore's सीन व्यूअर की रोशनी के साथ काम करती है), लेकिन कभी-कभी आपकी पसंद के मुताबिक माहौल हो सकता है या आपको खास तौर पर उन नतीजों के लिए रोशनी की ज़रूरत हो सकती है जिन्हें आप पाना चाहते हैं#39. आइए, एनवायरमेंट-इमेज एट्रिब्यूट [studio_small_07_1k.hdr को hdriयहांn.com से बताते हैं).

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

शैडो जोड़ना

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

shadow-intensity="1"

लाइट की चमक कम या ज़्यादा करना

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

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

इनमें से हर बदलाव बहुत छोटा था, लेकिन मॉडल अब बेहतर लग रहा है!

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

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

ARCore's दृश्य व्यूअर

जिन डिवाइस पर <model-दर्शक&gt काम करता है; उन पर ARCore's सीन व्यूअर ट्रिगर कर सकता है. अपने <model-दर्शक> एलिमेंट में 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 क्विक लुक, मैजिक लीप, WebXR

कई डिवाइसों पर कुछ और काम करने की ज़रूरत होती है.

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

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

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

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

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

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

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

उसी व्यूपोर्ट में, एक ही पेज, जैसे कि मोबाइल डिवाइस:

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

आगे क्या होगा?

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

अपने मॉडल पहचान लेने के बाद, आप अगले चरण के बारे में सोच सकते हैं:

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

हमारी डेवलपमेंट प्रोसेस GitHub पर खुली है. हम आपकी प्रतिक्रिया सुनना चाहेंगे!