रिएक्ट JS एप्लिकेशन में 3D मॉडल कैसे प्रस्तुत करें

अरे वहाँ, आजकल ब्राउज़र पहले की तुलना में अधिक शक्तिशाली होते जा रहे हैं और अब वे विभिन्न जटिल एनिमेशन को आसानी से प्रस्तुत कर सकते हैं। आपने बहुत सी वेबसाइटों को बिना किसी प्रदर्शन समस्या के 3D मॉडल प्रस्तुत करते देखा होगा। इस लेख में हम एक रिएक्ट एप्लिकेशन में आईफोन मॉडल को रेंडर करने के लिए का उपयोग करने जा रहे हैं। थ्री.जेएस इससे पहले कि हम इस ट्यूटोरियल को शुरू करें, मैं आपको एक डेमो वेबसाइट दिखाता हूँ जो इस मॉडल को प्रस्तुत करती है। यहाँ डेमो लिंक है: https://apple-iphone14.netlify.app/ इस वेबसाइट के लिए मैंने जीएसएपी के साथ थ्री.जेएस का उपयोग किया है ताकि स्मूथ स्क्रॉलिंग एनिमेशन जोड़ सकें। यदि आप इस प्रतिक्रियाशील 3D लैंडिंग पृष्ठ को बनाना सीखना चाहते हैं तो आप निम्न ट्यूटोरियल देख सकते हैं। https://youtu.be/cT160dOzpGY आइए हमारे रिएक्ट एप्लिकेशन में एक शानदार 3D मॉडल प्रस्तुत करें। सेटअप और स्थापना इस ट्यूटोरियल के लिए हम (क्रिएट-रिएक्शन-ऐप) टेम्प्लेट का उपयोग करेंगे। अपना प्रोजेक्ट फोल्डर खोलें और CRA टेम्प्लेट स्थापित करने के लिए निम्न कमांड का उपयोग करें। CRA npx create-react-app 3d-model-in-reactjs आप इस ट्यूटोरियल के लिए अपनी इच्छानुसार अपने आवेदन को नाम दे सकते हैं मैंने इसे "3d-mode-in-reactjs" के रूप में रखा है। यहां npx एक उपयोगिता है जो तब आती है जब आप npm स्थापित करते हैं, यह हमें उस पैकेज को स्थापित किए बिना npm रजिस्ट्री पर उपलब्ध किसी भी npm पैकेज को चलाने में मदद करता है। आइए 3D मॉडल रेंडर करने के लिए आवश्यक लाइब्रेरी स्थापित करें। निम्न आदेश का उपयोग करके निर्देशिका को "3d-mode-in-reactjs" में बदलें। cd 3d-mode-in-reactjs दो पुस्तकालयों और को स्थापित करने के लिए निम्न आदेश का उपयोग करें। @ प्रतिक्रिया-तीन/फाइबर @ प्रतिक्रिया-तीन/ड्रेई npm install @react-three/fiber @react-three/drei : यह तीनjs के लिए एक प्रतिक्रिया रेंडरर है। @react-three/fiber : यह उपयोगी सहायकों का संग्रह है और @ प्रतिक्रिया-तीन/फाइबर के लिए पूरी तरह कार्यात्मक, तैयार किए गए सार तत्व हैं। @react-three/drei इस ट्यूटोरियल के लिए हम Apple iPhone 13 Pro Max के 3D मॉडल का उपयोग करने जा रहे हैं। आप इस मॉडल को निम्न लिंक से प्राप्त कर सकते हैं👇। डैटस्केच द्वारा के तहत लाइसेंस प्राप्त है। किसी भी परियोजना में इस मॉडल का उपयोग करने से पहले इसका लाइसेंस जांचना सुनिश्चित करें। "Apple iPhone 13 Pro Max" क्रिएटिव कॉमन्स एट्रिब्यूशन दिए गए लिंक को खोलें और मॉडल को फॉर्मेट में डाउनलोड करें। जीएलटीएफ क्यों? थ्रीजेएस के अनुसार gltf दस्तावेज़ीकरण glTF रनटाइम एसेट डिलीवरी पर केंद्रित है, यह संचारित करने के लिए कॉम्पैक्ट और लोड करने के लिए तेज़ है। एक बार जब आप फ़ाइल डाउनलोड कर लेते हैं, तो फ़ोल्डर के अंदर नामक एक फ़ोल्डर बनाएँ और नामक फ़ोल्डर के अंतर्गत सभी मॉडल फ़ाइल को निकालें। src संपत्ति 3D-Model फ़ाइल खोलें और सभी कोड को निम्न css से बदलें। App.css .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } अब हम मॉडल प्रस्तुत करने के लिए तैयार हैं। आइए एक 3D मॉडल प्रस्तुत करने की मूल बातें समझते हैं अब एक मॉडल प्रस्तुत करते समय आपको 3 बातों का ध्यान रखना होगा। दृश्य: यहां आप सभी वस्तुओं, रोशनी और कैमरों को सेटअप कर सकते हैं। कैमरा: इसका उपयोग विभिन्न स्वर्गदूतों के माध्यम से 3D मॉडल को देखने के लिए किया जाता है। रेंडरर: इसका उपयोग नामक HTML तत्व पर एक दृश्य को प्रदर्शित / प्रस्तुत करने के लिए किया जाता है। canvas यदि आप सीधे सादे जावास्क्रिप्ट प्रोजेक्ट में थ्रीजे का उपयोग कर रहे हैं तो आपको इन सभी चीजों को मूल बातें से सेट करना पड़ सकता है, लेकिन इस ट्यूटोरियल में हम और का उपयोग कर रहे हैं, इसलिए हमारे पास नहीं है खरोंच से सभी चीजें करने के लिए। @react-three/fiber @react-three/drei फ़ाइल खोलें, डिफ़ॉल्ट कोड साफ़ करें और तत्व को से आयात करें। निम्नलिखित कोड स्निपेट चेकआउट करें। App.js canvas @react-three/fiber import "./App.css"; import { Canvas } from "@react-three/fiber"; function App() { return ( {/* Here we will render out model */} ); } export default App; यहां घटक और सेट करता है और प्रत्येक फ्रेम में प्रस्तुत करता है। Canvas scene camera scene अब निम्न कोड को कॉम्पोनेन्ट के अंदर कॉपी करें। आइए इनमें से प्रत्येक तत्व को समझते हैं। : एक एक वर्ग है जो Object3d से विरासत में मिला है और यह बहुभुज वस्तुओं का प्रतिनिधित्व करता है। जाल में आप और का उपयोग करके बहुभुज वस्तु को तुरंत चालू कर सकते हैं। जाल ज्यामिति सामग्री : यह एक दिए गए 'चौड़ाई', 'ऊंचाई' और 'गहराई' वाले आयताकार घनाभ के लिए एक ज्यामिति वर्ग है। : यह एक मानक भौतिक रूप से आधारित सामग्री है। अभी के लिए आपको बीच में एक काला वर्ग दिखाई दे सकता है जो किसी 3D ऑब्जेक्ट की तरह नहीं दिखता है। आइए नियंत्रण जोड़ें ताकि हम कैमरे के कोण को इस 3D ऑब्जेक्ट के चारों ओर घुमा सकें। निम्न पंक्ति का उपयोग करके को से आयात करें। @react-three/drei import { OrbitControls } from "@react-three/drei"; अब इस को घटकों के अंदर और के बाद रेंडर करें। डेवलपमेंट सर्वर पेज को रीफ्रेश करें और ऑब्जेक्ट को पकड़ने का प्रयास करें। अब आप इस वर्ग को एक 3D ऑब्जेक्ट के रूप में देखने में सक्षम हो सकते हैं। यह कैमरे को लक्ष्य के चारों ओर परिक्रमा करने की अनुमति देता है। अब वस्तु पूरी तरह काली है क्योंकि प्रकाश का कोई स्रोत नहीं है। तो आइए अपने दृश्य में रोशनी जोड़ें। घटक के अंदर से पहले निम्न पंक्ति जोड़ें। यहां यह प्रकाश विश्व स्तर पर दृश्य में सभी वस्तुओं को समान रूप से प्रकाशित करता है। अब आप मेष सामग्री का सफेद रंग देख सकते हैं। हम निम्नलिखित कोड में दिखाए गए अनुसार प्रॉप्स के माध्यम से परिवेशी प्रकाश की तीव्रता को भी बदल सकते हैं। ambientLight आप में प्रोप का उपयोग करके 3D ऑब्जेक्ट का रंग भी बदल सकते हैं। निम्न पंक्ति चेकआउट करें। color अब 3D ऑब्जेक्ट का रंग हरा है। कई अलग-अलग रोशनी और तत्व उपलब्ध हैं जिनका उपयोग आप संपूर्ण मॉडल बनाने के लिए कर सकते हैं। उसके लिए आप के दस्तावेज़ीकरण का उल्लेख कर सकते हैं। यह मूल बातें के लिए है चलो हमारे iPhone प्रस्तुत नहीं करते हैं। threejs मॉडल को JSX घटक में परिवर्तित करना मॉडल फाइलें खोलें और आपको विभिन्न फाइलें जैसे , , आदि दिखाई देंगी। हम को जेएसएक्स घटक में बदल देंगे ताकि हम इसे अपने रिएक्ट एप्लिकेशन में आसानी से प्रस्तुत कर सकें। टेक्सचर सीन.ग्लटफ सीन.बिन सीन.ग्ल्टफ अब किसी भी GLTF फाइल को JSX घटक में बदलने के लिए हम एक साधारण कमांड लाइन टूल का उपयोग करेंगे जिसे कहा जाता है। दस्तावेज़ीकरण के अनुसार एक छोटा कमांड-लाइन टूल है जो GLTF संपत्तियों को घोषणात्मक और पुन: उपयोग करने योग्य प्रतिक्रिया-तीन-फाइबर JSX घटकों में बदल देता है। gltfjsx gltfjsx अब टर्मिनल/cmd खोलें और उस निर्देशिका में जाएं जहां आपने सभी मॉडल फ़ाइलों को संग्रहीत किया है, मेरे मामले में यह फ़ोल्डर के अंदर है जो फ़ोल्डर में है। तो मैं निर्देशिका को बदलने के लिए निम्न आदेश का उपयोग करूंगा। 3D-मॉडल संपत्ति cd src/assets/3D-Model अब निम्न आदेश का प्रयोग करें। npx gltfjsx scene.gltf इस आदेश में कुछ सेकंड लगेंगे और फ़ाइल लौटाएगा जो JSX घटक है। Scene.js नोट: यदि आप नवीनतम NodeJS संस्करण का उपयोग कर रहे हैं तो यह gltfjsx कमांड आपको एक त्रुटि दे सकता है। मैं वर्तमान में 17.2.0 का उपयोग कर रहा हूं और यह आदेश ठीक काम कर रहा है। यदि आपको कोई त्रुटि आती है तो कृपया अपने NodeJs संस्करण को डाउनग्रेड करें और इस कोड को फिर से आजमाएं। आप NodeJs के विभिन्न संस्करणों का उपयोग करने के लिए जैसे टूल का उपयोग कर सकते हैं। nvm महत्वपूर्ण! फ़ाइल से मॉडल को प्रस्तुत करने से पहले हमें मॉडल फ़ाइलों को निर्देशिका में कॉपी करना होगा क्योंकि यदि आप फ़ाइल में देखते हैं तो यह हुक का उपयोग करता है जो नोड्स और सामग्री को फ़ाइल से लोड करता है। इसलिए अपने प्रोजेक्ट के फोल्डर में , और को कॉपी करें। Scene.js सार्वजनिक Scene.js useGLTF /scene.gltf पब्लिक टेक्सचर सीन.बिन सीन.ग्लटीएफ 3D मॉडल का प्रतिपादन फ़ाइल खोलें और को हटा दें। आइए को फ़ाइल से आयात करें। App.js Model Scene.js import Model from "./assets/3D-Model/Scene"; अब को घटक के अंदर, से पहले रेंडर करें। आउटपुट पेज को रिफ्रेश करें। अब आपको स्क्रीन पर आईफोन रेंडरिंग देखने में सक्षम होना चाहिए, आप ज़ूम इन और ज़ूम आउट कर सकते हैं और मॉडल को स्थानांतरित कर सकते हैं। आइए मॉडल के दृष्टिकोण को बढ़ाएं। आप सीधे कैनवास तत्व से कैमरे तक पहुंच सकते हैं। निम्न कोड स्निपेट के रूप में कैनवास के अंदर कैमरा जोड़ें। यहाँ का अर्थ "दृश्य क्षेत्र" है। आउटपुट देखने के लिए सेट करने के बाद पेज को रिफ्रेश करें। अभी के लिए हमने को 18 पर सेट किया है। आप अलग-अलग नंबर आज़मा सकते हैं और आउटपुट देख सकते हैं। fov fov fov अभी के लिए मॉडल पर कोई प्रतिबिंब नहीं है। मॉडल पर प्रतिबिंब जोड़ने के लिए आपको इस मॉडल के चारों ओर छवियों को सेट करना होगा ताकि ये छवियां इस मॉडल की सतह पर प्रतिबिंबित हो सकें। इन छवियों को जोड़ने के बजाय आइए लाइब्रेरी से का उपयोग करें। @react-three/drei घटक आइए आयात करें, import { Environment, OrbitControls } from "@react-three/drei"; अब मॉडल के बाद, पर्यावरण को जोड़ते हैं। यहां प्रीसेट मॉडल के आसपास के विभिन्न प्रकार के वातावरण को सेट करता है। अभी के लिए हमने इसे "सूर्यास्त" पर सेट कर दिया है। आप से उपलब्ध विभिन्न प्रीसेट की जांच कर सकते हैं। यहां इस वातावरण को जोड़ने के बाद आपको हमारे iPhone पर सुंदर प्रतिबिंब देखना चाहिए। आइए रिएक्ट के कंपोनेंट के अंदर मॉडल को रेंडर करें ताकि यह एसिंक्रोनस रूप से लोड हो सके। Suspense यहाँ अंतिम कोड है। https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06 अंतिम विचार यह इस ट्यूटोरियल का अंत है। आप और के दस्तावेज़ों को पढ़ने और विभिन्न तत्वों को आज़माने के लिए का उपयोग कर सकते हैं। यदि आप 3D मॉडल का उपयोग करके पूरी तरह से वेबसाइट बनाना चाहते हैं और इसके रंगों को चेतन करना चाहते हैं तो आप इस पाठ की शुरुआत में दिए गए वीडियो ट्यूटोरियल का अनुसरण कर सकते हैं। @react-three/fiber @react-three/drei https://docs.pmnd.rs/ यदि आप इस ट्यूटोरियल को पसंद करते हैं तो आपको मेरे YouTube चैनल पर नामक भयानक ट्यूटोरियल की जांच करनी चाहिए। आप इसे से चेक कर सकते हैं। कोडबक्स यहां आपको ये वेबसाइट टेम्पलेट भी पसंद आ सकते हैं: ReactJS में एक सुंदर पोर्टफोलियो टेम्पलेट => यहाँ ReactJS में NFT संग्रह लैंडिंग पृष्ठ => [यहाँ](- ReactJS में एक सुंदर पोर्टफोलियो टेम्पलेट => ) यहाँ इस ट्यूटोरियल को पढ़ने के लिए धन्यवाद। आपका दिन अच्छा रहे! भी प्रकाशित हो चुकी है।. यहाँ