इस ट्यूटोरियल में, हम Three.js में लाइटिंग और शैडोज़(Lighting and Shadows) के बारे में जानेंगे, जो आपके 3D सीन को वास्तविकता और गहराई देने के लिए महत्वपूर्ण होते हैं। लाइटिंग आपके 3D ऑब्जेक्ट्स को उजागर करने और उनके रंग और टेक्सचर को प्रभावी रूप से दिखाने में मदद करती है, जबकि शैडोज़ सीन में गहराई और वास्तविकता का आभास कराते हैं। इस ट्यूटोरियल में हम विभिन्न प्रकार की लाइटिंग, शैडोज़ को सक्षम करने, और उन्हें सही ढंग से लागू करने के तरीके सीखेंगे।
विभिन्न प्रकार की लाइटिंग (Ambient, Directional, Point, Spot)
Three.js में लाइटिंग का उपयोग 3D सीन को जीवंत और वास्तविक बनाने के लिए किया जाता है। लाइटिंग के विभिन्न प्रकार आपके 3D ऑब्जेक्ट्स को अलग-अलग तरीकों से प्रकाशित करते हैं, जिससे सीन में गहराई और आकर्षण उत्पन्न होता है। इस सेक्शन में, हम Ambient Light, Directional Light, Point Light, और Spotlight के बारे में जानेंगे और समझेंगे कि इन्हें 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);
मुख्य विशेषताएँ:
- केंद्रित प्रकाश: स्पॉटलाइट एक निश्चित दिशा में केंद्रित होती है।
- गहराई और कंट्रास्ट: यह लाइट सीन में गहराई और कंट्रास्ट उत्पन्न करती है।
शैडोज़ लागू करना (Implementing Shadows)
Three.js में शैडोज़ (Shadows) का उपयोग आपके 3D सीन को अधिक वास्तविक और गहराईपूर्ण बनाने के लिए किया जाता है। शैडोज़ 3D ऑब्जेक्ट्स और लाइटिंग के संयोजन से उत्पन्न होती हैं, जिससे सीन में ऑब्जेक्ट्स के आकार, दूरी, और स्थिति का एक यथार्थवादी आभास मिलता है। इस सेक्शन में, हम सीखेंगे कि Three.js में शैडोज़ को कैसे सक्षम किया जाए और उन्हें सही तरीके से कैसे लागू किया जाए।
शैडोज़ सक्षम करना (Enabling Shadows)
Three.js में शैडोज़ को लागू करने के लिए आपको कुछ स्टेप्स को फॉलो करना होता है, जिसमें शैडोज़ मैपिंग को सक्षम करना, लाइटिंग और ऑब्जेक्ट्स पर शैडोज़ की प्रॉपर्टीज़ को सेट करना शामिल है।
1. शैडो मैपिंग सक्षम करना (Enable Shadow Mapping)
शैडोज़ को रेंडर करने के लिए सबसे पहले आपको WebGLRenderer में शैडो मैपिंग को सक्षम करना होता है। यह प्रक्रिया रेंडरर को शैडोज़ उत्पन्न करने की अनुमति देती है।
उदाहरण:
// Renderer में शैडो मैपिंग को सक्षम करें renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // सॉफ़्ट शैडोज़ के लिए
मुख्य विशेषताएँ:
shadowMap.enabled = true: यह शैडोज़ को रेंडर करने की अनुमति देता है।shadowMap.type: शैडो मैपिंग के प्रकार को निर्धारित करता है, जैसे कि सॉफ़्ट शैडोज़ के लिएTHREE.PCFSoftShadowMap।
2. लाइटिंग पर शैडोज़ सक्षम करना (Enable Shadows on Lights)
शैडोज़ उत्पन्न करने के लिए, आपको उन लाइट्स पर शैडोज़ सक्षम करनी होंगी जो सीन में शैडोज़ डालेंगी। आमतौर पर, Directional Light और Spotlight शैडोज़ उत्पन्न करने के लिए उपयुक्त होते हैं।
उदाहरण:
// Directional Light पर शैडोज़ सक्षम करें const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 5, 5); directionalLight.castShadow = true; // शैडोज़ सक्षम करें scene.add(directionalLight); // शैडो मैप की रेज़ॉल्यूशन सेट करें directionalLight.shadow.mapSize.width = 1024; // डिफ़ॉल्ट 512 है directionalLight.shadow.mapSize.height = 1024;
मुख्य विशेषताएँ:
castShadow = true: यह लाइट को शैडोज़ उत्पन्न करने के लिए सक्षम करता है।shadow.mapSize: शैडो मैप की रेज़ॉल्यूशन सेट करता है, जिससे शैडोज़ की क्वालिटी बेहतर होती है।
3. ऑब्जेक्ट्स पर शैडोज़ सक्षम करना (Enable Shadows on Objects)
ऑब्जेक्ट्स पर शैडोज़ को सक्षम करने के लिए आपको दो प्रॉपर्टीज़ को सेट करना होगा:
castShadow: यह प्रॉपर्टी ऑब्जेक्ट्स को शैडोज़ डालने की अनुमति देती है।receiveShadow: यह प्रॉपर्टी ऑब्जेक्ट्स को शैडोज़ प्राप्त करने की अनुमति देती है।
उदाहरण:
// क्यूब ऑब्जेक्ट पर शैडोज़ सक्षम करें
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true; // शैडोज़ डालने के लिए
scene.add(cube);
// ग्राउंड प्लेन पर शैडोज़ प्राप्त करना
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true; // शैडोज़ प्राप्त करने के लिए
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
मुख्य विशेषताएँ:
castShadow: ऑब्जेक्ट को शैडोज़ डालने की अनुमति देता है।receiveShadow: ऑब्जेक्ट को शैडोज़ प्राप्त करने की अनुमति देता है।
4. शैडोज़ को अनुकूलित करना (Optimizing Shadows)
शैडोज़ की क्वालिटी और प्रदर्शन को अनुकूलित करने के लिए आप कुछ सेटिंग्स को कस्टमाइज़ कर सकते हैं, जैसे कि शैडो मैप की साइज, लाइट के कैमरा सेटिंग्स, और शैडोज़ की ब्लरिंग।
उदाहरण:
// शैडो कैमरा सेटिंग्स को अनुकूलित करना directionalLight.shadow.camera.left = -5; directionalLight.shadow.camera.right = 5; directionalLight.shadow.camera.top = 5; directionalLight.shadow.camera.bottom = -5;
मुख्य विशेषताएँ:
- शैडो कैमरा सेटिंग्स: यह शैडो मैप की सीमाओं को सेट करता है, जिससे शैडोज़ की पोज़िशनिंग और आकार को नियंत्रित किया जा सकता है।
- शैडो मैप साइज: उच्च साइज बेहतर शैडो क्वालिटी प्रदान करती है, लेकिन इसे संतुलित रखना जरूरी है ताकि प्रदर्शन पर प्रभाव न पड़े।
लाइटिंग और मैटेरियल्स के साथ काम करना
Three.js में लाइटिंग (Lighting) और मैटेरियल्स (Materials) का सही संयोजन आपके 3D सीन को जीवंत और यथार्थवादी बना सकता है। लाइटिंग ऑब्जेक्ट्स पर प्रकाश डालकर उन्हें उजागर करती है, जबकि मैटेरियल्स ऑब्जेक्ट्स की सतह को निर्धारित करते हैं कि वे लाइटिंग के साथ कैसे इंटरैक्ट करेंगे। इस सेक्शन में, हम समझेंगे कि Three.js में लाइटिंग और मैटेरियल्स के साथ कैसे काम किया जाता है ताकि आपके 3D मॉडल्स का रेंडरिंग प्रभावशाली और आकर्षक हो।
1. लाइटिंग के प्रकार और उनका प्रभाव (Types of Lighting and Their Effects)
Three.js में विभिन्न प्रकार की लाइटिंग का उपयोग किया जाता है, जैसे कि Ambient Light, Directional Light, Point Light, और Spotlight। हर प्रकार की लाइटिंग का मैटेरियल्स पर अलग-अलग प्रभाव पड़ता है:
- Ambient Light: यह बेसिक लाइटिंग प्रदान करती है जो पूरे सीन को हल्के प्रकाश में नहाती है, लेकिन छायाओं और हाइलाइट्स के बिना।
- Directional Light: यह लाइटिंग एक दिशा से आती है और छायाएं उत्पन्न करती है, जिससे सीन में गहराई आती है।
- Point Light: यह लाइटिंग एक बिंदु से निकलती है और सभी दिशाओं में फैलती है, जिससे ऑब्जेक्ट्स पर हाइलाइट्स और छायाएं बनती हैं।
- Spotlight: यह केंद्रित प्रकाश प्रदान करती है, जिससे किसी विशेष क्षेत्र पर प्रकाश डाला जा सकता है और स्पष्ट शैडोज़ उत्पन्न होती हैं।
2. मैटेरियल्स और उनका लाइटिंग के साथ इंटरैक्शन (Materials and Their Interaction with Lighting)
Three.js में विभिन्न प्रकार के मैटेरियल्स उपलब्ध हैं, जो लाइटिंग के साथ अलग-अलग तरीके से इंटरैक्ट करते हैं:
- MeshBasicMaterial: यह मैटेरियल लाइटिंग के प्रति प्रतिक्रिया नहीं करता है और एक स्थिर रंग दिखाता है। इसे उन ऑब्जेक्ट्स के लिए उपयोग किया जाता है जहाँ लाइटिंग आवश्यक नहीं होती।
- MeshLambertMaterial: यह मैटेरियल लाइटिंग के प्रति प्रतिक्रिया करता है और सॉफ़्ट शैडोज़ उत्पन्न करता है। यह ऑब्जेक्ट्स के लिए बेसिक रियलिज़्म प्रदान करता है।
- MeshPhongMaterial: यह मैटेरियल स्पेकुलर हाइलाइट्स (चमकदार स्पॉट) और शैडोज़ के साथ काम करता है। यह मेटलिक और चमकदार सतहों के लिए उपयुक्त है।
- MeshStandardMaterial: यह मैटेरियल फिजिकल बेस्ड रेंडरिंग (PBR) को सपोर्ट करता है और वास्तविक लाइटिंग प्रभाव उत्पन्न करता है। इसे उच्च-गुणवत्ता वाले रेंडरिंग के लिए उपयोग किया जाता है।
उदाहरण:
// Directional Light सेटअप
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
directionalLight.castShadow = true; // शैडोज़ सक्षम करें
scene.add(directionalLight);
// MeshStandardMaterial के साथ एक क्यूब का निर्माण
const material = new THREE.MeshStandardMaterial({
color: 0x00ff00,
metalness: 0.5,
roughness: 0.5
});
const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
cube.castShadow = true; // क्यूब शैडोज़ उत्पन्न करेगा
cube.receiveShadow = true; // क्यूब शैडोज़ प्राप्त करेगा
scene.add(cube);
3. मैटेरियल्स और लाइटिंग के साथ कस्टमाइज़ेशन (Customization with Materials and Lighting)
Three.js में आप मैटेरियल्स और लाइटिंग की प्रॉपर्टीज़ को कस्टमाइज़ कर सकते हैं ताकि आप अपने 3D सीन में विशेष प्रभाव प्राप्त कर सकें:
- Color: मैटेरियल का बेसिक रंग सेट करता है।
- Metalness: मैटेरियल की मेटलिक क्वालिटी को नियंत्रित करता है।
- Roughness: सतह की खुरदुरापन निर्धारित करता है, जिससे लाइटिंग का रिफ्लेक्शन प्रभावित होता है।
- Emissive: यह प्रॉपर्टी मैटेरियल को स्वयं प्रकाश उत्पन्न करने वाला बनाती है, जिससे ऑब्जेक्ट्स ग्लो करते हुए दिखाई देते हैं।
उदाहरण:
const material = new THREE.MeshStandardMaterial({
color: 0xff0000, // लाल रंग
metalness: 1, // पूर्ण मेटलिक
roughness: 0.2, // थोड़ी सी खुरदुरी सतह
emissive: 0x0000ff, // नीला ग्लो
emissiveIntensity: 0.5 // ग्लो की तीव्रता
});
const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material);
scene.add(sphere);
4. शैडोज़ और मैटेरियल्स के साथ अनुकूलन (Shadows and Materials Customization)
शैडोज़ का प्रभाव भी मैटेरियल्स के साथ मिलकर सीन में गहराई और वास्तविकता उत्पन्न करता है। शैडोज़ की सेटिंग्स और मैटेरियल की प्रॉपर्टीज़ को सही तरीके से कॉन्फ़िगर करके आप अधिक यथार्थवादी और आकर्षक दृश्य बना सकते हैं।
उदाहरण:
directionalLight.shadow.mapSize.width = 2048; // उच्च-गुणवत्ता शैडो मैपिंग directionalLight.shadow.mapSize.height = 2048; material.roughness = 0.8; // अधिक खुरदुरा, कम रिफ्लेक्शन material.metalness = 0.1; // कम मेटलिक, अधिक डिफ्यूज लाइटिंग