इस ट्यूटोरियल में, हम Three.js का उपयोग करके 3D वेब ग्राफिक्स की दुनिया में एक कदम आगे बढ़ेंगे। आप सीखेंगे कि बेसिक 3D ऑब्जेक्ट्स, जैसे कि क्यूब (Cube), स्फीयर (Sphere), और सिलिंडर (Cylinder), कैसे बनाए जाते हैं और उनका उपयोग कैसे किया जाता है। इसके साथ ही, हम विभिन्न प्रकार की ज्योमेट्री (Geometry) के साथ काम करेंगे, जिससे आप 3D मॉडलिंग के मूलभूत सिद्धांतों को समझ सकेंगे। यह ट्यूटोरियल उन लोगों के लिए है जो Three.js के साथ 3D ग्राफिक्स के क्षेत्र में अपनी यात्रा शुरू करना चाहते हैं।
बेसिक ज्योमेट्रीज़ (Cube, Sphere, Cylinder)
Three.js में बेसिक 3D ऑब्जेक्ट्स बनाने के लिए ज्योमेट्री (Geometry) का उपयोग किया जाता है। ज्योमेट्री वह संरचना है, जो किसी 3D ऑब्जेक्ट का आकार और रूप निर्धारित करती है। इस सेक्शन में, हम तीन सबसे सामान्य और उपयोगी ज्योमेट्रीज़—क्यूब (Cube), स्फीयर (Sphere), और सिलिंडर (Cylinder)—के बारे में जानेंगे और इन्हें Three.js में कैसे क्रिएट किया जाता है, यह समझेंगे।
1. क्यूब (Cube)
- क्यूब एक छह-फलक वाला ठोस 3D ऑब्जेक्ट है, जिसे Three.js में
BoxGeometryके माध्यम से बनाया जा सकता है। - Example:
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); - यहाँ,
BoxGeometryका उपयोग एक यूनिट क्यूब बनाने के लिए किया गया है, जिसे हरे रंग के मैटेरियल के साथ रेंडर किया गया है।
2. स्फीयर (Sphere)
- स्फीयर एक गोलाकार ज्योमेट्री है, जिसे Three.js में
SphereGeometryके माध्यम से क्रिएट किया जाता है। यह 3D सीन में बहुत सामान्य रूप से उपयोग की जाती है। - Example:
const geometry = new THREE.SphereGeometry(1, 32, 32); const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere); - इस कोड में,
SphereGeometryका उपयोग एक स्फीयर बनाने के लिए किया गया है, जिसमें 32 सेगमेंट्स हैं, जो इसे स्मूथ बनाते हैं।
3. सिलिंडर (Cylinder)
- सिलिंडर एक बेलनाकार ज्योमेट्री है, जिसे
CylinderGeometryका उपयोग करके Three.js में बनाया जाता है। यह ज्योमेट्री गुम्बद, टॉवर, और अन्य बेलनाकार संरचनाओं के लिए उपयोगी होती है। - Example:
const geometry = new THREE.CylinderGeometry(1, 1, 2, 32); const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); const cylinder = new THREE.Mesh(geometry, material); scene.add(cylinder);- यहाँ,
CylinderGeometryका उपयोग एक यूनिट-रेडियस और 2 यूनिट-ऊँचाई वाले सिलिंडर को बनाने के लिए किया गया है।
इन बेसिक ज्योमेट्रीज़ को समझकर, आप Three.js में अधिक जटिल 3D मॉडल्स बनाने के लिए एक ठोस नींव तैयार कर सकते हैं। अगली बार जब आप एक 3D सीन बनाएँ, तो इन ज्योमेट्रीज़ का प्रयोग करके देखें और उन्हें विभिन्न मैटेरियल्स और लाइटिंग के साथ कस्टमाइज़ करें।
- यहाँ,
मैटेरियल्स (Materials) और उनका उपयोग
Three.js में 3D ऑब्जेक्ट्स की सतह को बनाने और उनका रंग, बनावट और प्रकाश प्रतिक्रिया निर्धारित करने के लिए मैटेरियल्स (Materials) का उपयोग किया जाता है। हर 3D ऑब्जेक्ट को एक ज्योमेट्री और एक मैटेरियल की जरूरत होती है। मैटेरियल्स के बिना, आपके ऑब्जेक्ट्स केवल वायरफ्रेम दिखाई देंगे और उन्हें कोई रंग या बनावट नहीं होगी। इस सेक्शन में, हम कुछ प्रमुख मैटेरियल्स और उनके उपयोग के बारे में जानेंगे।
1. MeshBasicMaterial
- विशेषताएँ: यह सबसे सरल मैटेरियल है, जो केवल रंग दिखाने के लिए उपयोग किया जाता है। यह लाइटिंग का कोई प्रभाव नहीं लेता, इसलिए इसे गैर-प्रकाशित सीन में या बैकग्राउंड ऑब्जेक्ट्स के लिए उपयोग किया जा सकता है।
- उदाहरण:
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); - उपयोग: जब आप एक सादा, बिना प्रकाश के प्रभाव वाला ऑब्जेक्ट बनाना चाहते हैं, तो इस मैटेरियल का उपयोग करें।
2. MeshLambertMaterial
- विशेषताएँ: यह मैटेरियल लाइटिंग के प्रति प्रतिक्रिया करता है और नरम छायाएँ और हाइलाइट्स उत्पन्न करता है। इसे लाइटिंग के साथ अधिक वास्तविक 3D ऑब्जेक्ट्स बनाने के लिए उपयोग किया जाता है।
- उदाहरण:
const material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere); - उपयोग: इस मैटेरियल का उपयोग तब करें जब आप अपने सीन में बेसिक लाइटिंग और शैडोज़ के साथ काम कर रहे हों।
3. MeshPhongMaterial
- विशेषताएँ: यह मैटेरियल स्पेकुलर हाइलाइट्स (चमकदार स्पॉट) और अधिक विस्तृत शैडोज़ के साथ लाइटिंग को हैंडल करता है। यह मैटेरियल मेटलिक और चमकदार सतहों के लिए आदर्श है।
- उदाहरण:
const material = new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 }); const cylinder = new THREE.Mesh(geometry, material); scene.add(cylinder); - उपयोग: जब आपको एक चमकदार, मेटल जैसी सतह की जरूरत होती है, तो इस मैटेरियल का उपयोग करें।
4. MeshStandardMaterial
- विशेषताएँ: यह मैटेरियल फिजिकल बेस्ड रेंडरिंग (PBR) को सपोर्ट करता है, जो अधिक वास्तविक और विस्तृत लाइटिंग और शैडोज़ उत्पन्न करता है। यह प्रोजेक्ट्स के लिए आदर्श है जहाँ वास्तविकता का उच्च स्तर आवश्यक है।
- उदाहरण:
const material = new THREE.MeshStandardMaterial({ color: 0xffff00, roughness: 0.5, metalness: 0.5 }); const torus = new THREE.Mesh(geometry, material); scene.add(torus); - उपयोग: जब आपको उच्च-गुणवत्ता वाले रेंडरिंग और अधिक सटीक लाइटिंग प्रभाव की जरूरत हो, तो इस मैटेरियल का उपयोग करें।
अन्य मैटेरियल्स और उनकी उपयोगिता
Three.js में और भी कई मैटेरियल्स हैं जैसे MeshPhysicalMaterial, MeshToonMaterial, और ShaderMaterial, जो विशेष प्रकार के प्रभाव और शेडर्स के लिए उपयोग किए जाते हैं। प्रत्येक मैटेरियल का एक विशेष उद्देश्य होता है और उसे सही तरीके से उपयोग करने से आपके 3D सीन को अधिक जीवंत और वास्तविक बनाया जा सकता है।
कलर और टेक्सचर्स (Color and Textures) लागू करना
Three.js में 3D ऑब्जेक्ट्स को और अधिक वास्तविक और आकर्षक बनाने के लिए कलर और टेक्सचर्स का उपयोग किया जाता है। जहाँ कलर आपके ऑब्जेक्ट की सतह का साधारण रंग निर्धारित करता है, वहीं टेक्सचर्स आपकी सतह को एक विशिष्ट पैटर्न, इमेज, या डिजाइन से कवर करते हैं। इस सेक्शन में, हम सीखेंगे कि Three.js में कलर और टेक्सचर्स को कैसे लागू किया जाता है।
1. कलर लागू करना (Applying Color)
Three.js में ऑब्जेक्ट्स पर कलर लागू करना बहुत सरल है। जब आप एक मैटेरियल बनाते हैं, तो आप उसके color प्रॉपर्टी का उपयोग करके कलर सेट कर सकते हैं। यह कलर हेक्साडेसिमल (hexadecimal) फॉर्मेट में होता है।
उदाहरण:
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);
ऊपर दिए गए उदाहरण में, color प्रॉपर्टी का उपयोग करके हरे रंग का एक क्यूब (Cube) बनाया गया है।
2. टेक्सचर्स लागू करना (Applying Textures)
टेक्सचर्स आपकी ऑब्जेक्ट की सतह पर एक इमेज या पैटर्न लागू करने के लिए उपयोग किए जाते हैं। टेक्सचर लागू करने के लिए, आपको पहले इमेज को लोड करना होगा और फिर उसे मैटेरियल पर सेट करना होगा।
टेक्सचर लोड करना: Three.js में टेक्सचर लोड करने के लिए TextureLoader का उपयोग किया जाता है।
उदाहरण:
const loader = new THREE.TextureLoader();
const texture = loader.load('path/to/your/texture.jpg');
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
इस उदाहरण में, TextureLoader का उपयोग करके एक टेक्सचर इमेज लोड की गई है, और उसे map प्रॉपर्टी के माध्यम से मैटेरियल पर लागू किया गया है। इस तरह, आपके क्यूब की सतह पर टेक्सचर इमेज दिखाई देगी।
3. रिपीट और रैपिंग विकल्प (Repeat and Wrapping Options)
कभी-कभी आपको टेक्सचर को ऑब्जेक्ट की सतह पर बार-बार दोहराने या उसे एक विशेष तरीके से रैप करने की आवश्यकता होती है। Three.js में इसके लिए repeat और wrapS/wrapT प्रॉपर्टीज का उपयोग किया जाता है।
उदाहरण:
const loader = new THREE.TextureLoader();
const texture = loader.load('path/to/your/texture.jpg');
// टेक्सचर को दोहराना
texture.repeat.set(2, 2);
// टेक्सचर रैपिंग सेट करना
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 5), material);
scene.add(plane);
इस उदाहरण में, टेक्सचर को repeat सेटिंग का उपयोग करके दोहराया गया है, और wrapS और wrapT के माध्यम से रिपीट रैपिंग लागू की गई है।
बेसिक लाइटिंग (Basic Lighting)
Three.js में 3D सीन को वास्तविकता के करीब लाने के लिए लाइटिंग का उपयोग किया जाता है। लाइटिंग 3D ऑब्जेक्ट्स की सतह पर प्रकाश डालकर उनकी चमक, छाया और गहराई को दर्शाती है, जिससे वे अधिक जीवंत और प्रभावशाली दिखते हैं। इस सेक्शन में, हम Three.js में बेसिक लाइटिंग के प्रकारों और उनके उपयोग के बारे में जानेंगे।
1. एम्बिएंट लाइट (Ambient Light)
- विशेषताएँ: एम्बिएंट लाइट एक समान प्रकाश प्रदान करती है, जो पूरे सीन में समान रूप से फैलता है। यह सभी ऑब्जेक्ट्स को एक बेसिक रोशनी देता है, लेकिन इसमें कोई स्पष्ट छाया या हाइलाइट नहीं होता।
- उदाहरण:
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // सफेद रंग की हल्की रोशनी scene.add(ambientLight);
- उपयोग: एम्बिएंट लाइट का उपयोग तब किया जाता है जब आप पूरे सीन को एक समान रोशनी देना चाहते हैं, बिना किसी दिशा या छाया के।
2. डायरेक्शनल लाइट (Directional Light)
- विशेषताएँ: डायरेक्शनल लाइट एक दिशा से आने वाली रोशनी को दर्शाती है, जैसे कि सूरज की रोशनी। यह लाइट सीन में सभी ऑब्जेक्ट्स पर समान रूप से पड़ती है और लंबी छायाएं उत्पन्न करती है।
- उदाहरण:
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(1, 1, 1); // लाइट की दिशा सेट करना scene.add(directionalLight);
- उपयोग: जब आपको एक निश्चित दिशा से आने वाली तीव्र रोशनी की आवश्यकता हो, जैसे कि सूर्य की रोशनी को सिमुलेट करना हो, तब डायरेक्शनल लाइट का उपयोग करें।
3. पॉइंट लाइट (Point Light)
- विशेषताएँ: पॉइंट लाइट एक बिंदु से सभी दिशाओं में फैलने वाली रोशनी होती है, जैसे कि एक बल्ब की रोशनी। यह लाइट आसपास के ऑब्जेक्ट्स पर छाया और हाइलाइट्स उत्पन्न करती है।
- उदाहरण:
const pointLight = new THREE.PointLight(0xff0000, 1, 100); // लाल रंग की पॉइंट लाइट pointLight.position.set(5, 5, 5); // लाइट की स्थिति सेट करना scene.add(pointLight);
- उपयोग: पॉइंट लाइट का उपयोग तब करें जब आप एक स्थानीय लाइट स्रोत सिमुलेट करना चाहते हैं, जैसे कि लैंप या मशाल।
4. स्पॉटलाइट (Spotlight)
- विशेषताएँ: स्पॉटलाइट एक कोन के आकार में फैलने वाली रोशनी होती है। यह किसी एक दिशा में केंद्रित होती है और सर्कुलर छाया और हाइलाइट्स उत्पन्न करती है।
- उदाहरण:
const spotLight = new THREE.SpotLight(0x00ff00); spotLight.position.set(10, 10, 10); // लाइट की स्थिति सेट करना scene.add(spotLight);
- उपयोग: स्पॉटलाइट का उपयोग तब करें जब आपको एक केंद्रित और दिशा-निर्देशित लाइट की आवश्यकता हो, जैसे कि स्टेज लाइटिंग या फ्लैशलाइट की सिमुलेशन में।
शैडोज़ (Shadows) को सक्षम करना
लाइटिंग के साथ-साथ, शैडोज़ भी सीन को और अधिक वास्तविक बनाते हैं। Three.js में शैडोज़ को सक्षम करने के लिए आपको लाइट स्रोत और ऑब्जेक्ट दोनों पर शैडो सेटिंग्स को एक्टिवेट करना होगा।
उदाहरण:
// Renderer में शैडोज़ सक्षम करें renderer.shadowMap.enabled = true; // लाइट में शैडोज़ सक्षम करें directionalLight.castShadow = true; // ऑब्जेक्ट्स में शैडोज़ सक्षम करें cube.castShadow = true; plane.receiveShadow = true;