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