मॉडल-व्यूअर के साथ ऑगमेंटेड रिएलिटी (एआर)

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

इसके लिए, हमने iOS पर Magic Leap और Quick Look की सुविधा जोड़ी है. अब हम ar एट्रिब्यूट को जोड़कर, Android पर एआर की सुविधा के बारे में बता रहे हैं. यह एट्रिब्यूट, सीन व्यूअर नाम की ARCore की नई सुविधा पर आधारित है. यह 3D मॉडल देखने के लिए, बाहरी ऐप्लिकेशन है. सीन व्यूअर के बारे में ज़्यादा जानने के लिए, Android ब्राउज़र से एआर (ऑगमेंटेड रिएलिटी) में 3D मॉडल देखना लेख पढ़ें.

आइए, <model-viewer> की मदद से ऑगमेंटेड रिएलिटी (एआर) का इस्तेमाल करने का तरीका जानते हैं.

एट्रिब्यूट

आपको याद होगा कि वेब कॉम्पोनेंट का इस्तेमाल करने के लिए, किसी खास जानकारी की ज़रूरत नहीं होती. यह स्टैंडर्ड एचटीएमएल एलिमेंट की तरह काम करता है. इसमें यूनीक टैग के साथ-साथ प्रॉपर्टी और तरीके भी होते हैं. <script> टैग के साथ इसे इंस्टॉल करने के बाद, किसी भी अन्य एचटीएमएल एलिमेंट की तरह इसका इस्तेमाल करें.

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

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

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

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

<script type="module"
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

नतीजा

<model-viewer> के नए वर्शन को आज़माएं और हमें बताएं कि आपको यह कैसा लगा. समस्याओं और सुझावों के लिए, GitHub पर जाएं.