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

अरे वहाँ,

आजकल ब्राउज़र पहले की तुलना में अधिक शक्तिशाली होते जा रहे हैं और अब वे विभिन्न जटिल एनिमेशन को आसानी से प्रस्तुत कर सकते हैं। आपने बहुत सी वेबसाइटों को बिना किसी प्रदर्शन समस्या के 3D मॉडल प्रस्तुत करते देखा होगा। इस लेख में हम एक रिएक्ट एप्लिकेशन में आईफोन मॉडल को रेंडर करने के लिए थ्री.जेएस का उपयोग करने जा रहे हैं।

इससे पहले कि हम इस ट्यूटोरियल को शुरू करें, मैं आपको एक डेमो वेबसाइट दिखाता हूँ जो इस मॉडल को प्रस्तुत करती है। यहाँ डेमो लिंक है: https://apple-iphone14.netlify.app/

इस वेबसाइट के लिए मैंने जीएसएपी के साथ थ्री.जेएस का उपयोग किया है ताकि स्मूथ स्क्रॉलिंग एनिमेशन जोड़ सकें। यदि आप इस प्रतिक्रियाशील 3D लैंडिंग पृष्ठ को बनाना सीखना चाहते हैं तो आप निम्न ट्यूटोरियल देख सकते हैं।

आइए हमारे रिएक्ट एप्लिकेशन में एक शानदार 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

• @react-three/fiber : यह तीनjs के लिए एक प्रतिक्रिया रेंडरर है।

• @react-three/drei : यह उपयोगी सहायकों का संग्रह है और @ प्रतिक्रिया-तीन/फाइबर के लिए पूरी तरह कार्यात्मक, तैयार किए गए सार तत्व हैं।

  
  

इस ट्यूटोरियल के लिए हम Apple iPhone 13 Pro Max के 3D मॉडल का उपयोग करने जा रहे हैं। आप इस मॉडल को निम्न लिंक से प्राप्त कर सकते हैं👇।

• डैटस्केच द्वारा "Apple iPhone 13 Pro Max" क्रिएटिव कॉमन्स एट्रिब्यूशन के तहत लाइसेंस प्राप्त है। किसी भी परियोजना में इस मॉडल का उपयोग करने से पहले इसका लाइसेंस जांचना सुनिश्चित करें।

  
  

दिए गए लिंक को खोलें और मॉडल को gltf फॉर्मेट में डाउनलोड करें। जीएलटीएफ क्यों? थ्रीजेएस दस्तावेज़ीकरण के अनुसार glTF रनटाइम एसेट डिलीवरी पर केंद्रित है, यह संचारित करने के लिए कॉम्पैक्ट और लोड करने के लिए तेज़ है।

एक बार जब आप फ़ाइल डाउनलोड कर लेते हैं, तो src फ़ोल्डर के अंदर संपत्ति नामक एक फ़ोल्डर बनाएँ और 3D-Model नामक फ़ोल्डर के अंतर्गत सभी मॉडल फ़ाइल को निकालें।

App.css फ़ाइल खोलें और सभी कोड को निम्न css से बदलें।

 .App { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

अब हम मॉडल प्रस्तुत करने के लिए तैयार हैं।

आइए एक 3D मॉडल प्रस्तुत करने की मूल बातें समझते हैं

अब एक मॉडल प्रस्तुत करते समय आपको 3 बातों का ध्यान रखना होगा।

1. दृश्य: यहां आप सभी वस्तुओं, रोशनी और कैमरों को सेटअप कर सकते हैं।

2. कैमरा: इसका उपयोग विभिन्न स्वर्गदूतों के माध्यम से 3D मॉडल को देखने के लिए किया जाता है।

3. रेंडरर: इसका उपयोग canvas नामक HTML तत्व पर एक दृश्य को प्रदर्शित / प्रस्तुत करने के लिए किया जाता है।

   
   

यदि आप सीधे सादे जावास्क्रिप्ट प्रोजेक्ट में थ्रीजे का उपयोग कर रहे हैं तो आपको इन सभी चीजों को मूल बातें से सेट करना पड़ सकता है, लेकिन इस ट्यूटोरियल में हम @react-three/fiber और @react-three/drei का उपयोग कर रहे हैं, इसलिए हमारे पास नहीं है खरोंच से सभी चीजें करने के लिए।

App.js फ़ाइल खोलें, डिफ़ॉल्ट कोड साफ़ करें और canvas तत्व को @react-three/fiber से आयात करें। निम्नलिखित कोड स्निपेट चेकआउट करें।

 import "./App.css"; import { Canvas } from "@react-three/fiber"; function App() { return ( <div className="App"> <Canvas>{/* Here we will render out model */}</Canvas> </div> ); } export default App;

यहां Canvas घटक scene और camera सेट करता है और प्रत्येक फ्रेम में scene प्रस्तुत करता है।

अब निम्न कोड को <Canvas /> कॉम्पोनेन्ट के अंदर कॉपी करें।

 <Canvas> <mesh> <boxGeometry /> <meshStandardMaterial /> </mesh> </Canvas>

आइए इनमें से प्रत्येक तत्व को समझते हैं।

• <mesh> : एक जाल एक वर्ग है जो Object3d से विरासत में मिला है और यह बहुभुज वस्तुओं का प्रतिनिधित्व करता है। जाल में आप ज्यामिति और सामग्री का उपयोग करके बहुभुज वस्तु को तुरंत चालू कर सकते हैं।

• <boxGeometry /> : यह एक दिए गए 'चौड़ाई', 'ऊंचाई' और 'गहराई' वाले आयताकार घनाभ के लिए एक ज्यामिति वर्ग है।

• <meshStandardMaterial /> : यह एक मानक भौतिक रूप से आधारित सामग्री है।

  
  

अभी के लिए आपको बीच में एक काला वर्ग दिखाई दे सकता है जो किसी 3D ऑब्जेक्ट की तरह नहीं दिखता है।

आइए नियंत्रण जोड़ें ताकि हम कैमरे के कोण को इस 3D ऑब्जेक्ट के चारों ओर घुमा सकें। निम्न पंक्ति का उपयोग करके <OrbitControls /> को @react-three/drei से आयात करें।

 import { OrbitControls } from "@react-three/drei";

अब इस <OrbitControls /> को <Canvas> घटकों के अंदर और <mesh> के बाद रेंडर करें। डेवलपमेंट सर्वर पेज को रीफ्रेश करें और ऑब्जेक्ट को पकड़ने का प्रयास करें। अब आप इस वर्ग को एक 3D ऑब्जेक्ट के रूप में देखने में सक्षम हो सकते हैं। यह <OrbitControls /> कैमरे को लक्ष्य के चारों ओर परिक्रमा करने की अनुमति देता है।

अब वस्तु पूरी तरह काली है क्योंकि प्रकाश का कोई स्रोत नहीं है। तो आइए अपने दृश्य में रोशनी जोड़ें। <Canvas /> घटक के अंदर <mesh> से पहले निम्न पंक्ति जोड़ें।

 <ambientLight />

यहां यह ambientLight प्रकाश विश्व स्तर पर दृश्य में सभी वस्तुओं को समान रूप से प्रकाशित करता है। अब आप मेष सामग्री का सफेद रंग देख सकते हैं। हम निम्नलिखित कोड में दिखाए गए अनुसार प्रॉप्स के माध्यम से परिवेशी प्रकाश की तीव्रता को भी बदल सकते हैं।

 <ambientLight intensity={1.25} />

आप <meshStandardMaterial /> में color प्रोप का उपयोग करके 3D ऑब्जेक्ट का रंग भी बदल सकते हैं। निम्न पंक्ति चेकआउट करें।

 <meshStandardMaterial color="green"/>

अब 3D ऑब्जेक्ट का रंग हरा है। कई अलग-अलग रोशनी और तत्व उपलब्ध हैं जिनका उपयोग आप संपूर्ण मॉडल बनाने के लिए कर सकते हैं। उसके लिए आप threejs के दस्तावेज़ीकरण का उल्लेख कर सकते हैं। यह मूल बातें के लिए है चलो हमारे iPhone प्रस्तुत नहीं करते हैं।

मॉडल को JSX घटक में परिवर्तित करना

मॉडल फाइलें खोलें और आपको विभिन्न फाइलें जैसे टेक्सचर , सीन.ग्लटफ , सीन.बिन आदि दिखाई देंगी। हम सीन.ग्ल्टफ को जेएसएक्स घटक में बदल देंगे ताकि हम इसे अपने रिएक्ट एप्लिकेशन में आसानी से प्रस्तुत कर सकें।

अब किसी भी GLTF फाइल को JSX घटक में बदलने के लिए हम एक साधारण कमांड लाइन टूल का उपयोग करेंगे जिसे gltfjsx कहा जाता है। दस्तावेज़ीकरण के अनुसार gltfjsx एक छोटा कमांड-लाइन टूल है जो GLTF संपत्तियों को घोषणात्मक और पुन: उपयोग करने योग्य प्रतिक्रिया-तीन-फाइबर JSX घटकों में बदल देता है।

अब टर्मिनल/cmd खोलें और उस निर्देशिका में जाएं जहां आपने सभी मॉडल फ़ाइलों को संग्रहीत किया है, मेरे मामले में यह 3D-मॉडल फ़ोल्डर के अंदर है जो संपत्ति फ़ोल्डर में है। तो मैं निर्देशिका को बदलने के लिए निम्न आदेश का उपयोग करूंगा।

 cd src/assets/3D-Model

अब निम्न आदेश का प्रयोग करें।

 npx gltfjsx scene.gltf

इस आदेश में कुछ सेकंड लगेंगे और Scene.js फ़ाइल लौटाएगा जो JSX घटक है।

नोट: यदि आप नवीनतम NodeJS संस्करण का उपयोग कर रहे हैं तो यह gltfjsx कमांड आपको एक त्रुटि दे सकता है। मैं वर्तमान में 17.2.0 का उपयोग कर रहा हूं और यह आदेश ठीक काम कर रहा है। यदि आपको कोई त्रुटि आती है तो कृपया अपने NodeJs संस्करण को डाउनग्रेड करें और इस कोड को फिर से आजमाएं। आप NodeJs के विभिन्न संस्करणों का उपयोग करने के लिए nvm जैसे टूल का उपयोग कर सकते हैं।

महत्वपूर्ण!

Scene.js फ़ाइल से मॉडल को प्रस्तुत करने से पहले हमें मॉडल फ़ाइलों को सार्वजनिक निर्देशिका में कॉपी करना होगा क्योंकि यदि आप Scene.js फ़ाइल में देखते हैं तो यह useGLTF हुक का उपयोग करता है जो नोड्स और सामग्री को /scene.gltf फ़ाइल से लोड करता है। इसलिए अपने प्रोजेक्ट के पब्लिक फोल्डर में टेक्सचर , सीन.बिन और सीन.ग्लटीएफ को कॉपी करें।

3D मॉडल का प्रतिपादन

App.js फ़ाइल खोलें और <mesh> को हटा दें। आइए Model को Scene.js फ़ाइल से आयात करें।

 import Model from "./assets/3D-Model/Scene";

अब <Model /> को <Canvas /> घटक के अंदर, <OrbitControls /> से पहले रेंडर करें।

 <Canvas> <ambientLight intensity={1.25} /> <Model /> <OrbitControls /> </Canvas>

आउटपुट पेज को रिफ्रेश करें। अब आपको स्क्रीन पर आईफोन रेंडरिंग देखने में सक्षम होना चाहिए, आप ज़ूम इन और ज़ूम आउट कर सकते हैं और मॉडल को स्थानांतरित कर सकते हैं। आइए मॉडल के दृष्टिकोण को बढ़ाएं। आप सीधे कैनवास तत्व से कैमरे तक पहुंच सकते हैं। निम्न कोड स्निपेट के रूप में कैनवास के अंदर कैमरा जोड़ें।

<Canvas camera={{fov: 18}}>

यहाँ fov का अर्थ "दृश्य क्षेत्र" है। आउटपुट देखने के लिए fov सेट करने के बाद पेज को रिफ्रेश करें। अभी के लिए हमने fov को 18 पर सेट किया है। आप अलग-अलग नंबर आज़मा सकते हैं और आउटपुट देख सकते हैं।

अभी के लिए मॉडल पर कोई प्रतिबिंब नहीं है। मॉडल पर प्रतिबिंब जोड़ने के लिए आपको इस मॉडल के चारों ओर छवियों को सेट करना होगा ताकि ये छवियां इस मॉडल की सतह पर प्रतिबिंबित हो सकें। इन छवियों को जोड़ने के बजाय आइए @react-three/drei लाइब्रेरी से <Environment /> घटक का उपयोग करें।

आइए <Environment /> आयात करें,

 import { Environment, OrbitControls } from "@react-three/drei";

अब मॉडल के बाद, पर्यावरण को जोड़ते हैं।

 <Environment preset="sunset" />

यहां प्रीसेट मॉडल के आसपास के विभिन्न प्रकार के वातावरण को सेट करता है। अभी के लिए हमने इसे "सूर्यास्त" पर सेट कर दिया है। आप यहां से उपलब्ध विभिन्न प्रीसेट की जांच कर सकते हैं।

इस वातावरण को जोड़ने के बाद आपको हमारे iPhone पर सुंदर प्रतिबिंब देखना चाहिए। आइए रिएक्ट के Suspense कंपोनेंट के अंदर मॉडल को रेंडर करें ताकि यह एसिंक्रोनस रूप से लोड हो सके।

 <Suspense fallback={null}> <Model /> </Suspense>

यहाँ अंतिम कोड है।

https://gist.github.com/codebucks27/6defde4db7e290d95d7ff1ae39078a06

अंतिम विचार

यह इस ट्यूटोरियल का अंत है। आप @react-three/fiber और @react-three/drei के दस्तावेज़ों को पढ़ने और विभिन्न तत्वों को आज़माने के लिए https://docs.pmnd.rs/ का उपयोग कर सकते हैं। यदि आप 3D मॉडल का उपयोग करके पूरी तरह से वेबसाइट बनाना चाहते हैं और इसके रंगों को चेतन करना चाहते हैं तो आप इस पाठ की शुरुआत में दिए गए वीडियो ट्यूटोरियल का अनुसरण कर सकते हैं।

यदि आप इस ट्यूटोरियल को पसंद करते हैं तो आपको मेरे YouTube चैनल पर कोडबक्स नामक भयानक ट्यूटोरियल की जांच करनी चाहिए। आप इसे यहां से चेक कर सकते हैं।

आपको ये वेबसाइट टेम्पलेट भी पसंद आ सकते हैं:

• ReactJS में एक सुंदर पोर्टफोलियो टेम्पलेट => यहाँ

• ReactJS में NFT संग्रह लैंडिंग पृष्ठ => [यहाँ](- ReactJS में एक सुंदर पोर्टफोलियो टेम्पलेट => यहाँ )

  
  

इस ट्यूटोरियल को पढ़ने के लिए धन्यवाद। आपका दिन अच्छा रहे!