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

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

ARCore के साथ काम करने वाले Android डिवाइस पर देखे जाने पर, ar एट्रिब्यूट वाला <model-viewer> कॉम्पोनेंट एक बटन दिखाता है, जैसा कि इस उदाहरण में दिखाया गया है:

मॉडल दर्शक का स्क्रीनशॉट

ARCore के साथ काम करने वाले डिवाइसों पर इस बटन पर टैप करने से, Chrome के WebXR फ़ंक्शन या सीन व्यूअर ऐप्लिकेशन का इस्तेमाल करने वाला मॉडल दिखेगा. यह ar-modes एट्रिब्यूट की वैल्यू के हिसाब से तय होता है.

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

<model-viewer> के साथ शुरुआत करना

इन चरणों में, किसी भी वेबपेज पर <model-viewer> इस्तेमाल करने का तरीका बताया गया है.

<model-viewer> डिपेंडेंसी जोड़ें

Unpkg CDN से

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

npm से

npm install @google/model-viewer

इसके बाद, अपने पसंदीदा बंडलर का इस्तेमाल करके, node_modules/model-viewer/dist/model-viewer.min.js पर <model-viewer> जोड़ें.

<model-viewer> टैग शामिल करें

अपने एचटीएमएल दस्तावेज़ में <model-viewer> वेब कॉम्पोनेंट जोड़ें:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

<model-viewer> टैग को कॉन्फ़िगर करें

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

मॉडल एडिटर का स्क्रीनशॉट

मॉडल के साथ काम करने की सुविधा

gltf और glb फ़ाइल फ़ॉर्मैट वाले मॉडल <model-viewer> पर काम करते हैं. इस्तेमाल किए जा सकने वाले glTF एक्सटेंशन की सूची three.js GLTFLoader documentation देखें.

यह पक्का करने के लिए कि आपका मॉडल ठीक से दिखे, मॉडल एडिटर में अपने मॉडल की जांच करें.

ब्राउज़र और डिवाइस सहायता

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

एआर की सुविधाओं का इस्तेमाल करने के लिए, आपके पास ऐसा डिवाइस होना चाहिए जिस पर ARCore काम करता हो. साथ ही, Google Play Services for AR इंस्टॉल करना भी ज़रूरी है. webxr AR मोड के लिए, WebXR ब्राउज़र के लिए सहायता देखें. डिफ़ॉल्ट रूप से, अगर WebXR काम नहीं करता है, तो उसकी जगह सीन व्यूअर का इस्तेमाल किया जाएगा.

अगले चरण