इस ट्यूटोरियल में, हम Three.js के साथ इंटरएक्टिविटी और इवेंट्स (Interactivity and Events) पर ध्यान केंद्रित करेंगे। इंटरएक्टिविटी और इवेंट्स का सही उपयोग आपके 3D सीन को उपयोगकर्ता-अनुकूल और अधिक आकर्षक बना सकता है। इस गाइड में, हम माउस क्लिक, कीबोर्ड इनपुट, और अन्य इवेंट्स का उपयोग करके 3D ऑब्जेक्ट्स के साथ कैसे इंटरैक्ट किया जाए, इस पर चर्चा करेंगे। अगर आप अपने 3D प्रोजेक्ट्स में इंटरएक्टिविटी जोड़ना चाहते हैं, तो यह ट्यूटोरियल आपके लिए है।
माउस और कीबोर्ड इवेंट्स के साथ काम करना (Working with Mouse and Keyboard Events)
Three.js में माउस और कीबोर्ड इवेंट्स का उपयोग करके आप अपने 3D सीन को अधिक इंटरैक्टिव बना सकते हैं। ये इवेंट्स उपयोगकर्ताओं को 3D ऑब्जेक्ट्स के साथ संवाद करने, उन्हें घुमाने, स्केल करने, या सीन में अन्य क्रियाओं को ट्रिगर करने की अनुमति देते हैं। इस सेक्शन में, हम सीखेंगे कि Three.js में माउस और कीबोर्ड इवेंट्स को कैसे सेटअप और उपयोग किया जाता है।
1. माउस इवेंट्स का उपयोग (Using Mouse Events)
माउस इवेंट्स का उपयोग करके आप 3D सीन में क्लिक, होवर, या ड्रैग जैसी क्रियाओं को पहचान सकते हैं और उनका उत्तर दे सकते हैं। Three.js में, माउस इवेंट्स को संभालने के लिए आप HTML इवेंट लिसनर्स और Raycaster का उपयोग कर सकते हैं।
उदाहरण: माउस क्लिक पर ऑब्जेक्ट को सेलेक्ट करना
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
const selectedObject = intersects[0].object;
selectedObject.material.color.set(0xff0000); // रंग बदलें
}
}
window.addEventListener('click', onMouseClick, false);
मुख्य विशेषताएँ:
- Raycaster: यह उपयोगकर्ता के माउस पॉइंटर से सीन में ऑब्जेक्ट्स के साथ इंटरैक्शन का पता लगाने के लिए उपयोग किया जाता है।
- Mouse Vector: यह 2D माउस पॉइंटर की स्थिति को 3D सीन के संबंधित स्थान में परिवर्तित करता है।
2. कीबोर्ड इवेंट्स का उपयोग (Using Keyboard Events)
कीबोर्ड इवेंट्स का उपयोग करके आप उपयोगकर्ता द्वारा कीबोर्ड पर की जाने वाली इनपुट को पहचान सकते हैं और उनके अनुसार 3D सीन में क्रियाएं कर सकते हैं, जैसे कि ऑब्जेक्ट्स को मूव करना या कैमरा पोजिशन को बदलना।
उदाहरण: कीबोर्ड इनपुट के आधार पर ऑब्जेक्ट को मूव करना
function onKeyPress(event) {
switch (event.key) {
case 'w': // आगे मूव करें
object.position.z -= 0.1;
break;
case 's': // पीछे मूव करें
object.position.z += 0.1;
break;
case 'a': // बाएं मूव करें
object.position.x -= 0.1;
break;
case 'd': // दाएं मूव करें
object.position.x += 0.1;
break;
}
}
window.addEventListener('keydown', onKeyPress, false);
मुख्य विशेषताएँ:
- Event.key: यह उस कुंजी को पहचानता है जिसे उपयोगकर्ता ने दबाया है।
- मूवमेंट नियंत्रण: आप कीबोर्ड इवेंट्स के माध्यम से 3D ऑब्जेक्ट्स को विभिन्न दिशाओं में मूव कर सकते हैं।
3. माउस ड्रैग इवेंट्स का उपयोग (Using Mouse Drag Events)
माउस ड्रैग इवेंट्स का उपयोग 3D ऑब्जेक्ट्स को सीन में घुमाने या मूव करने के लिए किया जा सकता है। यह एक इंटरैक्टिव अनुभव प्रदान करता है, जैसे कि उपयोगकर्ता किसी मॉडल को माउस से पकड़कर घुमा सके।
उदाहरण: माउस ड्रैग के साथ ऑब्जेक्ट रोटेशन
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
function onMouseDown(event) {
isDragging = true;
}
function onMouseMove(event) {
if (isDragging) {
const deltaMove = {
x: event.clientX - previousMousePosition.x,
y: event.clientY - previousMousePosition.y
};
object.rotation.y += deltaMove.x * 0.005;
object.rotation.x += deltaMove.y * 0.005;
}
previousMousePosition = { x: event.clientX, y: event.clientY };
}
function onMouseUp() {
isDragging = false;
}
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mouseup', onMouseUp, false);
मुख्य विशेषताएँ:
- Dragging: यह आपको माउस से ऑब्जेक्ट को घुमाने या मूव करने की अनुमति देता है।
- Continuous Interaction: माउस मूवमेंट के साथ लगातार ऑब्जेक्ट्स को इंटरैक्ट करना।
4. माउस व्हील इवेंट का उपयोग (Using Mouse Wheel Event)
माउस व्हील इवेंट का उपयोग ज़ूम इन और ज़ूम आउट जैसी क्रियाओं के लिए किया जा सकता है, जिससे उपयोगकर्ता 3D सीन में अधिक गहराई से इंटरैक्ट कर सकता है।
उदाहरण: माउस व्हील से ज़ूम कंट्रोल
function onMouseWheel(event) {
camera.position.z += event.deltaY * 0.05;
}
window.addEventListener('wheel', onMouseWheel, false);
मुख्य विशेषताएँ:
- Zoom Control: माउस व्हील के माध्यम से उपयोगकर्ता कैमरा ज़ूम को नियंत्रित कर सकता है।
- DeltaY: यह माउस व्हील की दिशा और गति को दर्शाता है।
3D ऑब्जेक्ट्स के साथ इंटरएक्ट करना (Raycasting)
Three.js में Raycasting एक महत्वपूर्ण तकनीक है, जिसका उपयोग 3D ऑब्जेक्ट्स के साथ इंटरैक्ट करने के लिए किया जाता है। Raycasting का उपयोग करके आप यह निर्धारित कर सकते हैं कि माउस पॉइंटर या अन्य इनपुट के साथ कौन सा ऑब्जेक्ट इंटरसेक्ट हो रहा है, और उसके अनुसार कार्रवाई कर सकते हैं, जैसे कि ऑब्जेक्ट का रंग बदलना, उसे सेलेक्ट करना, या उसे मूव करना।
1. Raycasting का परिचय (Introduction to Raycasting)
Raycasting एक वर्चुअल किरण (Ray) को सीन में फायर करता है और यह जांचता है कि यह किरण किन 3D ऑब्जेक्ट्स से टकरा रही है। इसके आधार पर आप उन ऑब्जेक्ट्स के साथ इंटरैक्शन कर सकते हैं। यह तकनीक माउस क्लिक या अन्य इनपुट इवेंट्स के जवाब में ऑब्जेक्ट्स के साथ इंटरैक्शन के लिए उपयोग की जाती है।
2. Raycaster सेटअप करना (Setting Up Raycaster)
Raycasting को लागू करने के लिए, सबसे पहले आपको Three.js में Raycaster और Vector2 ऑब्जेक्ट्स को सेटअप करना होगा। Vector2 का उपयोग माउस पॉइंटर की स्थिति को स्टोर करने के लिए किया जाता है, और Raycaster का उपयोग किरणों को फायर करने के लिए।
उदाहरण: माउस क्लिक के साथ Raycasting का सेटअप
// Raycaster और माउस वेक्टर सेट करें
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
// माउस की स्थिति को अपडेट करें
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
// कैमरा और माउस पॉइंटर की स्थिति से किरण सेट करें
raycaster.setFromCamera(mouse, camera);
// सभी बच्चों के साथ इंटरसेक्शन का पता लगाएं
const intersects = raycaster.intersectObjects(scene.children);
// अगर कोई इंटरसेक्शन है, तो पहला ऑब्जेक्ट लें
if (intersects.length > 0) {
const selectedObject = intersects[0].object;
selectedObject.material.color.set(0xff0000); // रंग बदलें या कोई अन्य कार्रवाई करें
}
}
window.addEventListener('click', onMouseClick, false);
मुख्य विशेषताएँ:
- Raycaster: यह वह ऑब्जेक्ट है जो सीन में किरणों को फायर करता है और ऑब्जेक्ट्स के साथ उनके इंटरसेक्शन की पहचान करता है।
- Mouse Vector: यह माउस की 2D स्क्रीन पोज़िशन को 3D स्पेस में मैप करता है।
3. Raycasting के साथ ऑब्जेक्ट्स का चयन (Selecting Objects with Raycasting)
Raycasting का उपयोग 3D ऑब्जेक्ट्स को सलेक्ट करने के लिए किया जा सकता है। आप माउस क्लिक इवेंट का उपयोग कर सकते हैं, और जब माउस क्लिक किसी ऑब्जेक्ट के साथ इंटरसेक्ट करता है, तो आप उस ऑब्जेक्ट पर कोई भी क्रिया कर सकते हैं।
उदाहरण: ऑब्जेक्ट को सेलेक्ट और हाईलाइट करना
function onMouseClick(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
const selectedObject = intersects[0].object;
selectedObject.material.emissive.set(0x00ff00); // ऑब्जेक्ट को हाईलाइट करें
}
}
window.addEventListener('click', onMouseClick, false);
मुख्य विशेषताएँ:
- इंटरसेक्शन डिटेक्शन: Raycaster इंटरसेक्टिंग ऑब्जेक्ट्स को पहचानता है और उनकी जानकारी वापस देता है।
- ऑब्जेक्ट मैनिपुलेशन: आप इंटरसेक्टेड ऑब्जेक्ट्स के साथ किसी भी प्रकार की कार्रवाई कर सकते हैं, जैसे कि उनका रंग बदलना या उन्हें मूव करना।
4. Raycasting के साथ माउस मूवमेंट (Mouse Movement with Raycasting)
Raycasting का उपयोग केवल माउस क्लिक के साथ ही नहीं, बल्कि माउस मूवमेंट के साथ भी किया जा सकता है। जब माउस किसी ऑब्जेक्ट के ऊपर से गुजरता है, तो आप उस ऑब्जेक्ट के रंग को बदल सकते हैं या अन्य विज़ुअल फीडबैक दे सकते हैं।
उदाहरण: माउस होवर इफेक्ट
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
scene.children.forEach(child => {
child.material.color.set(0xffffff); // सभी ऑब्जेक्ट्स को डिफ़ॉल्ट रंग में सेट करें
});
if (intersects.length > 0) {
const hoveredObject = intersects[0].object;
hoveredObject.material.color.set(0xff0000); // होवर किए गए ऑब्जेक्ट का रंग बदलें
}
}
window.addEventListener('mousemove', onMouseMove, false);
मुख्य विशेषताएँ:
- Hover Effect: माउस मूवमेंट के आधार पर ऑब्जेक्ट्स के साथ इंटरैक्शन का पता लगाना।
- Real-time Interaction: उपयोगकर्ता की हर माउस मूवमेंट पर सीन को रिएक्टिव बनाना।
GUI का उपयोग करके सीन को नियंत्रित करना (Using dat.GUI)
Three.js में dat.GUI एक लोकप्रिय और आसान-से-उपयोग होने वाला टूल है, जिसका उपयोग आप अपने 3D सीन के विभिन्न पैरामीटर्स को नियंत्रित करने के लिए कर सकते हैं। यह टूल एक ग्राफिकल यूजर इंटरफेस (GUI) प्रदान करता है, जहां आप स्लाइडर्स, बटन, और अन्य इनपुट्स का उपयोग करके अपने सीन के मटेरियल्स, लाइटिंग, और अन्य प्रॉपर्टीज़ को रियल-टाइम में बदल सकते हैं।
1. dat.GUI का परिचय (Introduction to dat.GUI)
dat.GUI एक लाइटवेट जावास्क्रिप्ट लाइब्रेरी है, जिसका उपयोग डेवलपर्स को उनके 3D सीन के पैरामीटर्स को नियंत्रित करने के लिए किया जाता है। इसे प्रोजेक्ट में जोड़ने के बाद, आप विभिन्न सेटिंग्स जैसे कि रंग, स्थिति, रोटेशन, स्केल, और अन्य प्रॉपर्टीज़ को आसानी से एडजस्ट कर सकते हैं।
2. dat.GUI सेटअप करना (Setting Up dat.GUI)
dat.GUI का उपयोग शुरू करने के लिए, सबसे पहले आपको इसे अपने प्रोजेक्ट में शामिल करना होगा। आप इसे CDN के माध्यम से या npm/yarn के साथ इंस्टॉल कर सकते हैं।
CDN के माध्यम से शामिल करना:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
npm के साथ इंस्टॉल करना:
npm install dat.gui
3. dat.GUI का उपयोग करके नियंत्रण जोड़ना (Adding Controls with dat.GUI)
dat.GUI के माध्यम से आप अपने सीन के पैरामीटर्स को आसानी से नियंत्रित कर सकते हैं। इसे सेटअप करने के लिए, सबसे पहले dat.GUI ऑब्जेक्ट का निर्माण करें और फिर विभिन्न पैरामीटर्स के लिए कंट्रोल्स जोड़ें।
उदाहरण:
// dat.GUI का एक नया GUI ऑब्जेक्ट बनाएं
const gui = new dat.GUI();
// एक क्यूब बनाएं और सीन में जोड़ें
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// क्यूब की स्थिति को नियंत्रित करने के लिए GUI कंट्रोल्स जोड़ें
const cubeFolder = gui.addFolder('Cube');
cubeFolder.add(cube.position, 'x', -10, 10);
cubeFolder.add(cube.position, 'y', -10, 10);
cubeFolder.add(cube.position, 'z', -10, 10);
// क्यूब के रंग को नियंत्रित करने के लिए GUI कंट्रोल जोड़ें
cubeFolder.addColor({ color: 0x00ff00 }, 'color').onChange(value => {
cube.material.color.set(value);
});
// क्यूब के स्केल को नियंत्रित करने के लिए GUI कंट्रोल जोड़ें
cubeFolder.add(cube.scale, 'x', 0.1, 5);
cubeFolder.add(cube.scale, 'y', 0.1, 5);
cubeFolder.add(cube.scale, 'z', 0.1, 5);
// GUI को डिफ़ॉल्ट रूप से खोलें
cubeFolder.open();
मुख्य विशेषताएँ:
- GUI ऑब्जेक्ट: यह
dat.GUIका मुख्य ऑब्जेक्ट है, जिसके माध्यम से आप सभी कंट्रोल्स को जोड़ते हैं। - Folders: आप कंट्रोल्स को फ़ोल्डर्स में ग्रुप कर सकते हैं ताकि वे व्यवस्थित और आसानी से नेविगेट करने योग्य हों।
- Real-time Updates: जब आप GUI में कोई परिवर्तन करते हैं, तो वह आपके सीन में रियल-टाइम में अपडेट होता है।
4. dat.GUI के साथ अधिक नियंत्रण जोड़ना (Adding More Controls with dat.GUI)
dat.GUI का उपयोग करके आप अन्य कई प्रकार के कंट्रोल्स भी जोड़ सकते हैं, जैसे कि स्लाइडर्स, कलर पिकर्स, बटन, और अधिक। आप इनका उपयोग लाइटिंग, कैमरा, और अन्य ऑब्जेक्ट्स के लिए कर सकते हैं।
उदाहरण: लाइटिंग को नियंत्रित करना
// लाइटिंग जोड़ें
const light = new THREE.DirectionalLight(0xffffff, 1);
scene.add(light);
// GUI में लाइटिंग के लिए कंट्रोल्स जोड़ें
const lightFolder = gui.addFolder('Light');
lightFolder.add(light.position, 'x', -10, 10);
lightFolder.add(light.position, 'y', -10, 10);
lightFolder.add(light.position, 'z', -10, 10);
lightFolder.add(light, 'intensity', 0, 2);
// GUI में कलर पिकर जोड़ें
lightFolder.addColor({ color: 0xffffff }, 'color').onChange(value => {
light.color.set(value);
});
5. dat.GUI के साथ इंटरेक्टिविटी बढ़ाना (Enhancing Interactivity with dat.GUI)
dat.GUI का उपयोग करते हुए, आप अपने 3D सीन को उपयोगकर्ता-अनुकूल और अधिक इंटरैक्टिव बना सकते हैं। आप इसे डेवलपमेंट टूल के रूप में उपयोग कर सकते हैं ताकि आप अपने सीन के विभिन्न पैरामीटर्स को लाइव एडजस्ट कर सकें, या आप इसे उपयोगकर्ता इंटरफ़ेस के हिस्से के रूप में उपयोग कर सकते हैं।