अब तक, हमने अपनी 3D सीन्स बनाने के लिए केवल प्रिमिटिव आकारों (cube, sphere, plane, आदि ...) का उपयोग किया है।

लेकिन 3D ग्राफ़िक्स को इतना रोचक क्या बनाता है, वह है 3D मॉडलिंग सॉफ़्टवेयर जैसे Blender, Maya, Cinema 4D, Nomad Sculpt, आदि के साथ बनाए गए 3D मॉडल्स को इम्पोर्ट और डिस्प्ले करने की क्षमता।

परिचय

हम इस कोर्स में 3D मॉडलिंग नहीं करेंगे क्योंकि यह अपने आप में एक पूरा विषय है। threejs और React Three Fiber के साथ 3D अनुभव बनाने के लिए यह जरूरी कौशल नहीं है। आप ऑनलाइन कई मुफ्त 3D मॉडल्स पा सकते हैं और उन्हें अपने प्रोजेक्ट्स में उपयोग कर सकते हैं। लेकिन 3D मॉडलिंग के मूल बातें सीखना बहुत मददगार हो सकता है जिससे 3D मॉडल्स को बेहतर समझ सके और उन्हें अपने प्रोजेक्ट्स में ठीक से उपयोग कर सके।

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

शुरुआत करने के लिए सबसे प्रसिद्ध एक Blender Guru का डोनट ट्यूटोरियल है।

3D मॉडल्स

3D मॉडल्स फाइलें हैं जिनमें 3D मॉडल की ज्यामिति के बारे में डेटा होता है। इनमें टेक्सचर और एनीमेशन भी हो सकते हैं।

3D मॉडल्स के लिए कई विभिन्न फाइल फॉरमैट्स हैं। सबसे सामान्य हैं:

• .obj: एक सरल फाइल फॉरमेट जिसमें केवल 3D मॉडल की ज्यामिति होती है।
• .fbx: एक बाइनरी फाइल फॉरमेट जिसमें 3D मॉडल की ज्यामिति, टेक्सचर और एनीमेशन होते हैं। यह Unity और Unreal Engine द्वारा उपयोग किया जाने वाला फॉरमेट है।
• .gltf: एक JSON फाइल फॉरमेट जिसमें 3D मॉडल की ज्यामिति, टेक्सचर और एनीमेशन होते हैं। यह वेब के लिए अनुशंसित फॉरमेट है क्योंकि यह एक बहुत ही संकुचित फॉरमेट है।
• .glb: .gltf फॉरमेट का बाइनरी संस्करण। यह एक अधिक संकुचित फॉरमेट है, आमतौर पर .gltf फॉरमेट की तुलना में 33% छोटा।

इस कोर्स में, हम .gltf और .glb फॉरमेट्स का उपयोग करेंगे।

Blender का उपयोग करके किसी भी 3D मॉडल को एक फॉरमेट से दूसरे फॉरमेट में कन्वर्ट करना आसान है।

3D मॉडल्स ढूंढना

यहाँ कुछ वेबसाइट्स हैं जहाँ आप मुफ्त के 3D मॉडल्स ढूंढ सकते हैं:

• Poly Pizza: रॉयल्टी-फ्री लो-पॉली 3D मॉडल्स का संग्रह
• Pmndrs Market: रॉयल्टी-फ्री 3D असेट्स का एक और संग्रह (हाँ, React Three Fiber के रचनाकारों से!)
• Sketchfab: एक प्लेटफार्म जहाँ आप 3D मॉडल्स को शेयर और डाउनलोड कर सकते हैं। यहाँ पर कई मुफ्त के मॉडल्स उपलब्ध हैं!
• Unity Asset Store: मूलतः Unity के लिए, लेकिन आप यहाँ पर कई 3D मॉडल्स पैक ढूंढ सकते हैं जो आप अपने प्रोजेक्ट्स में इस्तेमाल कर सकते हैं।
• Quaternius: एक 3D कलाकार जो अपनी वेबसाइट पर मुफ्त 3D मॉडल पैक शेयर करते हैं।
• Kenney: एक और शानदार रचनाकार जो कई उच्च गुणवत्ता वाले मुफ्त 3D मॉडल पैक शेयर करते हैं।

सभी मामलों में, यह सुनिश्चित करें कि आप 3D मॉडल्स की लाइसेंस को अच्छी तरह से जांच लें। इनमें से कुछ केवल व्यक्तिगत उपयोग के लिए मुफ्त हैं, कुछ वाणिज्यिक उपयोग के लिए मुफ्त हैं, और कुछ बिल्कुल मुफ्त नहीं हैं। कुछ में कस्टम लाइसेंस भी हो सकते हैं जो विशिष्ट संदर्भ जैसे NFTs में 3D मॉडल्स का उपयोग करने से रोकते हैं।

अब हमारे पास हमारे 3D मॉडल्स हैं, चलिए देखते हैं कि उन्हें अपने प्रोजेक्ट्स में कैसे लोड करें।

प्रोजेक्ट संरचना

public फ़ोल्डर हमारे प्रोजेक्ट का रूट फ़ोल्डर है। यह वह जगह है जहाँ हम अपने प्रोजेक्ट के सभी स्थिर असेट्स रखते हैं (छवियाँ, 3D मॉडल्स, ऑडियो फ़ाइलें, आदि ...)।

अपने प्रोजेक्ट को संगठित रखने के लिए, हम public फ़ोल्डर में models फ़ोल्डर बनाएंगे ताकि अपने सभी 3D मॉडल्स को संग्रहित कर सकें।

स्टार्टर पैक में पहले से ही models फ़ोल्डर है जिसमें कुछ 3D मॉडल्स हैं। ये मॉडल्स Quaternius से हैं।

useLoader

React Three Fiber में किसी भी बाहरी संसाधन को लोड करने के लिए बुनियादी घटक useLoader हुक है। यह एक हुक है जो एक loader को पहले तर्क के रूप में और एक url को दूसरे तर्क के रूप में लेता है। यह लोड किए गए संसाधन को लौटाता है।

loader एक क्लास है जो threejs से Loader क्लास को बढ़ाता है। विभिन्न प्रकार के संसाधनों को लोड करने के लिए threejs में कई लोडर्स उपलब्ध हैं। उदाहरण के लिए, GLTFLoader का उपयोग .gltf और .glb फ़ाइलों को लोड करने के लिए किया जाता है।

चलिए अपने पहले 3D मॉडल को लोड करते हैं:

Copy
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

primitive घटक का उपयोग हमारे दृश्य में threejs object को प्रदर्शित करने के लिए किया जाता है। यह एक object प्रॉप लेता है जो वह threejs object होता है जिसे हम प्रदर्शित करना चाहते हैं।

हमारा 3D मॉडल अब हमारे दृश्य में लोड और प्रदर्शित हो चुका है। (अच्छा लग रहा है, है ना?)

useLoader लोड किए गए संसाधन को कैश करने का कार्य करता है। इसलिए यदि हम एक ही संसाधन को कई बार लोड करते हैं, तो इसे केवल एक बार लोड किया जाएगा।

useGLTF / useFBX

Drei लाइब्रेरी दो hooks प्रदान करती है 3D मॉडल्स लोड करने के लिए: useGLTF और useFBX। ये useLoader hook के चारों ओर रैपर्स हैं जो उपयोग में आसान हैं।

चलिए हमारे मौजूदा कोड को useGLTF hook का उपयोग करने के लिए अपडेट करते हैं: