three.js  

 
 

3D फ़ाइल स्वरूपों के लिए जावास्क्रिप्ट लाइब्रेरी

मुफ़्त 3D लाइब्रेरी के माध्यम से WebGL, FBX, Collada के साथ-साथ OBJ फ़ाइल स्वरूपों को पढ़ने, लिखने और रेंडर करने के लिए ओपन सोर्स JavaScript API।

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

पुस्तकालय 3D मॉडल से संबंधित कई महत्वपूर्ण विशेषताओं का समर्थन करता है जैसे कि एक दृश्य बनाना, 3D मॉडल लोड करना, टेक्स्ट बनाना, एक कैमरा सेट करने वाली रेखाएँ खींचना, एक ज्यामितीय क्यूब बनाना, दृश्य में एक क्यूब जोड़ना, दृश्य को प्रस्तुत करना, व्यूपोर्ट को तत्व में जोड़ना, और भी कई। तीन.जेएस पुस्तकालय में विभिन्न कैमरों का उपयोग किया जाता है।

Previous Next

तीन.js . के साथ शुरुआत करना

3.js स्थापित करने का सबसे आसान तरीका npm का उपयोग करना है। सुचारू स्थापना के लिए कृपया निम्न कमांड का उपयोग करें। 

एनपीएम के माध्यम से तीन.जेएस स्थापित करें

npm install --save three 

जावास्क्रिप्ट का उपयोग करके दृश्य बनाएं

ओपन सोर्स लाइब्रेरी थ्री.जेएस ने अपने स्वयं के जावास्क्रिप्ट एप्लिकेशन के अंदर एक क्यूब कताई के लिए एक 3 डी दृश्य बनाने के लिए समर्थन प्रदान किया है। तीन.जेएस के साथ कुछ भी प्रदर्शित करने के लिए हमें एक दृश्य, कैमरा और रेंडरर की आवश्यकता होती है। दृश्य को पूरा करने के लिए आप विभिन्न कैमरों और उनकी विशेषता का उपयोग कर सकते हैं। इसके बाद, आप एक रेंडरर इंस्टेंस का उपयोग कर सकते हैं और उस आकार को सेट कर सकते हैं जिस पर हम चाहते हैं कि यह हमारे ऐप को प्रस्तुत करे। आप निम्न या उच्च संकल्प रख सकते हैं। अंत में, आप अपने HTML दस्तावेज़ में रेंडरर तत्व (<कैनवास>) जोड़ते हैं। आप BoxGeometry का उपयोग करके और इसे रंगने के लिए सामग्री का उपयोग करके आसानी से एक क्यूब बना सकते हैं। उसके बाद, आपको एक मेष की आवश्यकता होती है जिसे दृश्य में डाला जा सकता है और आपकी आवश्यकता के अनुसार स्थानांतरित किया जा सकता है।

The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and रेंडरर. You can use different cameras and their attribute to complete the scene. Next, you can use a रेंडरर instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the रेंडरर element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.

The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a जाल that can be inserted into the scene and moved according to your need.

JavaScript के माध्यम से 3D मॉडल लोड हो रहा है

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

आरेख में रेखाएँ खींचना

ओपन सोर्स लाइब्रेरी तीन.जेएस ने अपने स्वयं के जावास्क्रिप्ट एप्लिकेशन के अंदर रेखाएं या सर्कल बनाने के लिए समर्थन प्रदान किया है। शुरू करने के लिए हमें रेंडरर, सीन और कैमरा सेट करना होगा। उसके बाद, आपको सामग्री को परिभाषित करने की आवश्यकता है और आप LineBasicMaterial या LineDashedMaterial का उपयोग कर सकते हैं। सामग्री के बाद, हमें कुछ शीर्षों के साथ ज्यामिति की आवश्यकता होगी। प्रत्येक क्रमागत युग्म के बीच रेखाएँ खींची जाती हैं।

 हिन्दी