3डी रेंडरिंग की शुरुआत ने इंटरनेट प्रौद्योगिकियों के साथ उपयोगकर्ता की बातचीत को बदल दिया है। शुरुआत के लिए, वेब ऐप्स अधिक दिलचस्प हो गए हैं, जो वेब ब्राउज़र के माध्यम से एक आकर्षक और इंटरैक्टिव अनुभव प्रदान करते हैं।
इस तकनीक को पहले से ही गेमिंग और संवर्धित/वर्चुअल रियलिटी क्षेत्रों द्वारा उत्सुकता से अपनाया जा चुका है। यह आभासी तत्वों के साथ बातचीत करने का एक यथार्थवादी और तल्लीन करने वाला तरीका प्रदान करता है।
रिएक्ट एप्लिकेशन में 3D ऑब्जेक्ट्स को रेंडर करने का तरीका जानें।
3डी मॉडलिंग और प्रोग्रामिंग की मूल बातें
इससे पहले कि आप 3D रेंडरिंग के साथ आरंभ करें, कुछ बिंदु हैं जिनसे आपको अवगत होने की आवश्यकता है:
- 3D वस्तुओं में अलग-अलग बिंदु या शीर्ष होते हैं, जो उनकी संरचना को तीन आयामों में परिभाषित करते हैं। इन बिंदुओं को मिलाने से चेहरे बनते हैं जो स्क्रीन पर वस्तु का आकार बनाते हैं।
- आधुनिक ब्राउज़रों में WebGL जैसी तकनीकों का उपयोग करके 3D रेंडर करने की अंतर्निहित क्षमता होती है। वे 3डी मॉडल और दृश्यों को जल्दी से प्रस्तुत करने के लिए आपकी मशीन में ग्राफिकल प्रोसेसिंग यूनिट की शक्ति का उपयोग करके ऐसा करते हैं।
- कोई भी 3D ऑब्जेक्ट जिसे आपका ब्राउज़र प्रस्तुत करता है, में तीन मुख्य घटक होते हैं। ये दृश्य, कैमरा और रेंडरर हैं, और ये सभी एक महत्वपूर्ण भूमिका निभाते हैं। दृश्य रोशनी और कैमरों सहित आपके सभी 3डी तत्वों को स्थापित करने के लिए आधार मंच प्रदान करता है। कैमरा आपको 3D ऑब्जेक्ट को विभिन्न कोणों से देखने की अनुमति देता है। अंत में, रेंडरर एक कैनवास HTML तत्व के शीर्ष पर दृश्य को आरोहित और प्रदर्शित करता है।
थ्री.जेएस और रिएक्ट थ्री फाइबर के साथ 3डी रेंडरिंग
थ्री.जे.एस एक JavaScript लाइब्रेरी है जिसका उपयोग आप वेब ब्राउज़र में 3D ऑब्जेक्ट रेंडर करने के लिए कर सकते हैं। इसके बिल्ट-इन घटकों का उपयोग करके, आप अपने रिएक्ट एप्लिकेशन की अन्य विशेषताओं के साथ-साथ अपने ब्राउज़र में आसानी से 3डी ऑब्जेक्ट बना और रेंडर कर सकते हैं।
प्रतिक्रिया-तीन-फाइबर पैकेज Three.js के शीर्ष पर काम करता है। यह ब्राउज़र में 3D ऑब्जेक्ट बनाने और प्रस्तुत करने के लिए Three.js घटकों का उपयोग करने की प्रक्रिया को सरल करता है। दिलचस्प बात यह है कि यह कस्टम भी प्रदान करता है प्रतिक्रिया हुक जो रिएक्ट में 3D ऑब्जेक्ट बनाते समय काम आता है।
एक प्रतिक्रिया अनुप्रयोग में 3डी वस्तुओं का प्रतिपादन
अपने ब्राउज़र के साथ-साथ ब्लेंडर-निर्मित 3D मॉडल पर एक साधारण 3D आकार प्रस्तुत करने के लिए नीचे दिए गए चरणों का पालन करें। यदि आप ब्लेंडर से परिचित नहीं हैं, एक शुरुआत के रूप में शुरुआत करना सीखें.
एक रिएक्ट एप्लिकेशन बनाएं, नीचे दिए गए आदेश को चलाने के लिए अपना टर्मिनल चालू करें, और आवश्यक निर्भरताओं को स्थापित करें:
एनपीएम तीन @ प्रतिक्रिया-तीन/फाइबर @ प्रतिक्रिया-तीन/ड्रेई स्थापित करेंथ्री.जेएस, रिएक्ट-थ्री-फाइबर और रिएक्शन-थ्री-ड्रेई पैकेज इंस्टॉल करें। रिएक्ट-थ्री-ड्रेई लाइब्रेरी 3डी दृश्यों और वस्तुओं को बनाने के लिए रिएक्ट-थ्री-फाइबर के साथ काम करती है।
एक 3D आकार प्रस्तुत करें
आप बहुत कम कोड वाले ब्राउज़र में एक साधारण 3D बॉक्स आकार प्रस्तुत कर सकते हैं। खोलें src/app.js फ़ाइल, सभी बॉयलरप्लेट रिएक्ट कोड हटाएं, और निम्नलिखित जोड़ें:
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {कैनवास} से"@ प्रतिक्रिया-तीन/फाइबर";
आयात {ऑर्बिटकंट्रोल} से"@react-three/drei";समारोहडिब्बा() {
वापस करना (
<जाल>
<boxBufferGeometryसंलग्न करना ="ज्यामिति" />
<मेश लैम्बर्ट मटेरियलसंलग्न करना="सामग्री"रंग="हॉट गुलाबी" />
जाल>
)
}
निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<डिवकक्षा का नाम="ऐप-हेडर">
<कैनवास>
<ऑर्बिटकंट्रोल />
<परिवेश प्रकाशतीव्रता ={0.5} />
<सुर्खियोंपद={[10,15,10]} कोण={0.3} />
<डिब्बा />
कैनवास>
डिव>
डिव>
);
}
यह कोड निम्न कार्य करता है:
- डिब्बा कंपोनेंट 3D बॉक्स को रेंडर करने के लिए रिएक्शन-थ्री-फाइबर से मेश, बॉक्सबफर जियोमेट्री और मेश लैम्बर्टमटेरियल कंपोनेंट्स का इस्तेमाल करता है। बॉक्स के आकार को बनाने के लिए ये तीन घटक हाथ से काम करते हैं।
- BoxBufferGeometry घटक बॉक्स बनाता है और यह कोड मेश लैम्बर्टमटेरियल घटक के रंग गुण को गर्म गुलाबी पर सेट करता है।
- इसके बाद यह कैनवस तत्व को प्रस्तुत करता है जिसमें परिवेशी प्रकाश, एक स्पॉटलाइट और ऑर्बिट कंट्रोल घटक गुण सेट के साथ बॉक्स घटक होता है।
- परिवेश प्रकाश घटक गुण कैनवास में एक नरम प्रकाश जोड़ता है। स्पॉटलाइट घटक 0.3 के कोण के साथ एक विशिष्ट स्थिति से केंद्रित प्रकाश जोड़ता है। अंत में, OrbitControls घटक आपको 3D ऑब्जेक्ट के चारों ओर कैमरे को नियंत्रित करने देता है।
index.js फ़ाइल में app.js घटक आयात और प्रस्तुत करें और अपने ब्राउज़र में परिणाम देखने के लिए विकास सर्वर को स्पिन करें http://localhost: 3000.
एक ब्लेंडर-निर्मित 3D मॉडल प्रस्तुत करें
ब्लेंडर एक ओपन-सोर्स टूल है जिसका उपयोग क्रिएटिव द्वारा विभिन्न क्षेत्रों में 3D मॉडल, विज़ुअल इफ़ेक्ट और इंटरैक्टिव 3D एप्लिकेशन बनाने के लिए किया जाता है। आप अपने वेब एप्लिकेशन के लिए 3डी मॉडल बनाने के लिए ब्लेंडर का उपयोग कर सकते हैं।
इस ट्यूटोरियल के लिए, आप उपलब्ध SRT प्रदर्शन द्वारा एक BMW 3D मॉडल प्रस्तुत करेंगे स्केचफैब.
सामान्य आरोप बनाएं
आरंभ करने के लिए, मॉडल को Sketchfab से GLTF (GL Transmission Format) में डाउनलोड करें। यह प्रारूप ब्राउज़र पर 3D मॉडल प्रस्तुत करना आसान बनाता है। एक बार डाउनलोड पूरा हो जाने पर, मॉडल का फ़ोल्डर खोलें और मॉडल की फ़ाइल को अपने रिएक्ट एप्लिकेशन के अंदर सार्वजनिक निर्देशिका में ले जाएँ।
अब, अपनी app.js फ़ाइल पर जाएँ और इसे नीचे दिए गए कोड से पॉप्युलेट करें।
- निम्नलिखित घटकों को आयात करें:
आयात {यूजीजीएलटीएफ, स्टेज, प्रेजेंटेशन कंट्रोल्स} से"@react-three/drei"; - मॉडल घटक बनाएँ और नीचे कोड जोड़ें:
समारोहनमूना(रंगमंच की सामग्री){
कॉन्स्ट {दृश्य} = जीएलटीएफ का उपयोग करें ("/बीएमडब्ल्यू.जीएलबी");
वापस करना<प्राचीनवस्तु={दृश्य} {...सहारा} />
}निर्यातगलती करनासमारोहअनुप्रयोग() {
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<डिवकक्षा का नाम="ऐप-हेडर">
डीपीआर = {[1,2]}
छाया कैमरा = {{पसंदीदा: 45}}
शैली = {{"पद": "शुद्ध"}}
>
गति = {1.5}
वैश्विक ज़ूम = {0.5}
ध्रुवीय = {[-0.1, गणितपीआई / 4]}
>
<अवस्थापर्यावरण={व्यर्थ}>
<नमूनापैमाना={0.01} />
अवस्था>
प्रस्तुति नियंत्रण>
कैनवास>
डिव>
डिव>
);
} - React-three-drei लाइब्रेरी से useGLTF हुक एक दृश्य चर को परिभाषित करता है और इसे "/bmw.glb" पथ पर स्थित मॉडल फ़ाइल का मान निर्दिष्ट करता है। घटक तब एक आदिम वस्तु देता है जो 3D मॉडल के लिए दृश्य प्रस्तुत करता है।
- कैनवस तत्व उन मुख्य घटकों को प्रस्तुत करता है जो मॉडल बनाते हैं, निर्दिष्ट गुणों के साथ, जैसे डिवाइस पिक्सेल अनुपात (डीपीआर), छाया, कैमरा कोण और शैली।
- आप तब गति और वैश्विक ज़ूम जैसे प्रस्तुति नियंत्रण घटक के गुणों को निर्दिष्ट करते हैं। ये गुण परिभाषित करते हैं कि आप ऑन-स्क्रीन मॉडल को कैसे नियंत्रित करेंगे।
- अंत में, ब्राउज़र स्क्रीन पर मॉडल को माउंट करने वाले स्टेज घटक को कॉन्फ़िगर करें।
अपने एप्लिकेशन में परिवर्तनों को अपडेट करने के लिए डेवलपमेंट सर्वर को स्पिन करें। आपको अपने ब्राउज़र पर प्रदान किया गया मॉडल देखना चाहिए।
आपके वेब एप्लिकेशन में 3D मॉडल का प्रतिपादन
आपके वेब एप्लिकेशन में 3डी मॉडल प्रस्तुत करने से कई लाभ मिल सकते हैं, जैसे अधिक यथार्थवादी और इंटरैक्टिव 3डी अनुभव प्रदान करके उपयोगकर्ता अनुभव में सुधार करना। नतीजतन, उपयोगकर्ता उत्पाद के साथ बेहतर तरीके से जुड़ सकते हैं।
हालाँकि, 3D तत्वों को प्रस्तुत करने के अपने डाउनसाइड हो सकते हैं जैसे कि एप्लिकेशन के प्रदर्शन को नकारात्मक रूप से प्रभावित करना। 3D मॉडल को रेंडर करने के लिए अधिक संसाधनों की आवश्यकता होती है, जिसके कारण आपका ऐप अधिक धीमी गति से लोड हो सकता है।