Wawa Sensei logo

React Three Fiber क्या है?

कोडिंग शुरू करने से पहले, आइए देखें कि हम React Three Fiber का उपयोग क्यों कर रहे हैं और यह क्या है।

WebGL

WebGL किसी भी संगत वेब ब्राउज़र के भीतर interactive 2D और 3D ग्राफिक्स को प्रस्तुत करने के लिए एक JavaScript API है, जिसमें प्लग-इन्स का उपयोग नहीं किया जाता है।

यह OpenGL ES, एक low-level 3D ग्राफिक्स API के आधार पर बनाया गया है जो embedded devices के लिए होता है। WebGL हार्डवेयर-एक्सेलेरटेड 2D और 3D ग्राफिक्स के रेंडरिंग की अनुमति देता है, जिससे ब्राउज़र में smoothly चलने वाली complex visualizations और games बनाना संभव हो जाता है।

लेकिन सीधे WebGL कोड लिखना बहुत कठिन और समय-सापेक्ष है। यही कारण है कि Three.js काम में आता है...

Three.js

Three.js एक JavaScript लाइब्रेरी है जो WebGL का उपयोग करके ब्राउज़र में 3D ग्राफिक्स बनाने और एनीमेट करने के लिए एक सरल API प्रदान करती है।

यह WebGL की कई low-level विवरणों को abstract कर देती है, जिससे complex 3D scenes और animations बनाना आसान हो जाता है।

React Three Fiber

React Three Fiber Three.js के लिए एक React renderer है, जो आपको किसी देवलररेटिव तरीके से Three.js का उपयोग करने की अनुमति देता है, जैसे कि आप React का उपयोग करके user interfaces बनाते हैं।

आप इसे R3F के रूप में भी देख सकते हैं।

R3F एक set of React components प्रदान करता है जो Three.js objects, जैसे कि meshes, lights, और cameras के अनुरूप होते हैं, और आपको complex 3D scenes और animations बनाने के लिए React's के component model का उपयोग करने की अनुमति देता है।

उसी परिणाम के लिए, React Three Fiber का कोड Three.js कोड की तुलना में काफी छोटा और पढ़ने में आसान होता है।

यहाँ दोनों लाइब्रेरियों के साथ एक cube को प्रदर्शित करने का एक सरल उदाहरण है:

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres जिसे pmndrs के नाम से भी जाना जाता है, एक अत्यधिक सक्रिय डेवलपर समूह है जो React Three Fiber और अन्य उपयोगी लाइब्रेरी जैसे के लिए जिम्मेदार है:

  • drei: r3f के लिए उपयोगी helpers और पूरी तरह से क्रियाशील घटकों का संग्रह
  • gltfjsx: एक कमांड-लाइन उपकरण जो gltf फाइलों (3D मॉडल फाइल फॉर्मेट) से तैयार उपयोग घटक उत्पन्न करता है
  • react-spring: एक spring-physics आधारित एनीमेशन लाइब्रेरी
  • zustand: एक छोटा, तेज़ और स्केलेबल state-management समाधान
  • react-xr: एक सेट React घटक जो R3F का उपयोग करके VR और AR अनुभव बनाना आसान बनाते हैं ...और भी बहुत कुछ!

हम इस कोर्स में इनमे से कुछ लाइब्रेरी का उपयोग करेंगे।

मैं आपको इन्हें जांचने की सलाह देता हूँ, और इसे अक्सर करने, क्योंकि इन्हें लगातार नई विशेषताओं और सुधारों के साथ अपडेट किया जाता है।

विकल्प

अन्य लाइब्रेरी भी हैं जो अन्य फ्रंट-एंड फ्रेमवर्क्स के लिए समान कार्यक्षमता प्रदान करती हैं, जैसे कि Svelte के लिए Threlte, Vue के लिए TresJS, और Angular के लिए Angular Three।

हाल ही में pmndrs ने drei-vanilla भी जारी किया है जो की drei का एक वैनिला संस्करण है उन लोगो के लिए जो इसके घटकों को बिना React के इस्तेमाल करना चाहते हैं।

< Introduction
Setup >