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

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

इसके लिए, हमने iOS पर Magic Leap और क्विक लुक की सुविधा जोड़ दी है. अब तक का डेटा हम Android पर एआर (ऑगमेंटेड रिएलिटी) की सुविधा का एलान करने जा रहे हैं. इसके अलावा, ar एट्रिब्यूट की वैल्यू सबमिट करें. यह एट्रिब्यूट एक नई 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 पर आपका स्वागत है.