इस ट्यूटोरियल में, हम Three.js का उपयोग करके एक सरल 3D गेम (Project: A Simple 3D Game) बनाने के चरणों पर चर्चा करेंगे। इस प्रोजेक्ट के माध्यम से, आप सीखेंगे कि कैसे Three.js के साथ 3D ऑब्जेक्ट्स को एनिमेट करना, इंटरेक्टिविटी जोड़ना, और एक मजेदार और इंटरैक्टिव गेम बनाना है। यह गाइड आपको Three.js का उपयोग करके गेम डेवलपमेंट की मूल बातें समझने और अपने कौशल को बढ़ाने में मदद करेगा। यदि आप 3D गेम बनाने में रुचि रखते हैं, तो यह ट्यूटोरियल आपके लिए एक बेहतरीन शुरुआत है।
प्रोजेक्ट का परिचय और उद्देश्य (Project Introduction and Objective)
इस प्रोजेक्ट का उद्देश्य Three.js का उपयोग करके एक सरल 3D गेम बनाना है। यह प्रोजेक्ट आपको 3D गेम डेवलपमेंट की बुनियादी समझ और Three.js के साथ काम करने के कौशल को विकसित करने में मदद करेगा। इस गेम में, आप 3D ऑब्जेक्ट्स को एनिमेट करना, उपयोगकर्ता इंटरेक्शन जोड़ना, और गेम मैकेनिक्स को लागू करना सीखेंगे।
उद्देश्य (Objective):
- 3D ऑब्जेक्ट्स का निर्माण: आप सीखेंगे कि Three.js का उपयोग करके 3D ऑब्जेक्ट्स कैसे बनाए जाएं और उन्हें गेम में कैसे शामिल किया जाए।
- एनिमेशन और इंटरेक्टिविटी: इस प्रोजेक्ट में, आप ऑब्जेक्ट्स को एनिमेट करना और गेमप्ले के लिए आवश्यक इंटरेक्टिविटी जोड़ना सीखेंगे।
- गेम मैकेनिक्स: आप बुनियादी गेम मैकेनिक्स को लागू करना सीखेंगे, जैसे कि स्कोरिंग सिस्टम, जीतने और हारने की स्थिति, और उपयोगकर्ता नियंत्रण।
इस प्रोजेक्ट के अंत तक, आप एक ऐसा 3D गेम बनाने में सक्षम होंगे, जो न केवल उपयोगकर्ताओं को मनोरंजन प्रदान करेगा, बल्कि आपको Three.js में 3D गेम डेवलपमेंट की मूल बातें भी सिखाएगा। यह प्रोजेक्ट उन लोगों के लिए आदर्श है जो 3D गेम डेवलपमेंट में नए हैं और Three.js के साथ अपने कौशल को बढ़ाना चाहते हैं।
बेसिक गेमप्ले एलिमेंट्स जोड़ना (Adding Basic Gameplay Elements)
बेसिक गेमप्ले एलिमेंट्स एक गेम का मुख्य भाग होते हैं, जो उपयोगकर्ताओं को एक इंटरेक्टिव और मनोरंजक अनुभव प्रदान करते हैं। इस सेक्शन में, हम Three.js का उपयोग करके हमारे सरल 3D गेम में कुछ बेसिक गेमप्ले एलिमेंट्स जोड़ेंगे। ये एलिमेंट्स गेम के फाउंडेशन के रूप में काम करेंगे और आपको एक मजेदार गेमिंग अनुभव बनाने में मदद करेंगे।
1. गेम ऑब्जेक्ट्स बनाना (Creating Game Objects)
सबसे पहले, हमें गेम के लिए 3D ऑब्जेक्ट्स बनाने होंगे, जो गेमप्ले के दौरान उपयोग किए जाएंगे। उदाहरण के लिए, एक चलने वाला क्यूब जो उपयोगकर्ता द्वारा नियंत्रित किया जाएगा, और कुछ बाधाएं जिनसे उसे बचना होगा।
उदाहरण: क्यूब और बाधाएं बनाना
// सीन, कैमरा, और रेंडरर सेटअप करें
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// खिलाड़ी का क्यूब बनाएं
const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const playerCube = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(playerCube);
// कुछ बाधाएं बनाएं
const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1);
const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const obstacle1 = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
obstacle1.position.set(3, 0, -5);
scene.add(obstacle1);
const obstacle2 = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
obstacle2.position.set(-3, 0, -5);
scene.add(obstacle2);
camera.position.z = 5;
2. गेम ऑब्जेक्ट्स को एनिमेट करना (Animating Game Objects)
अब, हम इन 3D ऑब्जेक्ट्स को एनिमेट करेंगे। उदाहरण के लिए, खिलाड़ी के क्यूब को बाएं और दाएं मूव करना, और बाधाओं को आगे की ओर आना।
उदाहरण: खिलाड़ी क्यूब को बाएं और दाएं मूव करना
let moveLeft = false;
let moveRight = false;
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft') moveLeft = true;
if (event.key === 'ArrowRight') moveRight = true;
});
document.addEventListener('keyup', (event) => {
if (event.key === 'ArrowLeft') moveLeft = false;
if (event.key === 'ArrowRight') moveRight = false;
});
function animate() {
requestAnimationFrame(animate);
if (moveLeft) playerCube.position.x -= 0.05;
if (moveRight) playerCube.position.x += 0.05;
obstacle1.position.z += 0.05;
obstacle2.position.z += 0.05;
if (obstacle1.position.z > 5) obstacle1.position.z = -5;
if (obstacle2.position.z > 5) obstacle2.position.z = -5;
renderer.render(scene, camera);
}
animate();
3. टकराव की पहचान (Collision Detection)
गेम में एक महत्वपूर्ण तत्व टकराव की पहचान (Collision Detection) है। हमें यह पहचानने की आवश्यकता है कि जब खिलाड़ी का क्यूब किसी बाधा से टकराता है, तो गेम को कैसे प्रतिक्रिया देनी चाहिए।
उदाहरण: सरल टकराव की पहचान
function detectCollision(player, obstacle) {
const playerBox = new THREE.Box3().setFromObject(player);
const obstacleBox = new THREE.Box3().setFromObject(obstacle);
return playerBox.intersectsBox(obstacleBox);
}
function animate() {
requestAnimationFrame(animate);
if (moveLeft) playerCube.position.x -= 0.05;
if (moveRight) playerCube.position.x += 0.05;
obstacle1.position.z += 0.05;
obstacle2.position.z += 0.05;
if (obstacle1.position.z > 5) obstacle1.position.z = -5;
if (obstacle2.position.z > 5) obstacle2.position.z = -5;
if (detectCollision(playerCube, obstacle1) || detectCollision(playerCube, obstacle2)) {
console.log('Game Over');
// यहां गेम ओवर लॉजिक जोड़ें
}
renderer.render(scene, camera);
}
animate();
4. स्कोरिंग सिस्टम जोड़ना (Adding a Scoring System)
खेल को अधिक दिलचस्प बनाने के लिए, हम एक स्कोरिंग सिस्टम जोड़ सकते हैं। खिलाड़ी हर बार बाधाओं से बचने पर अंक प्राप्त करेगा।
उदाहरण: स्कोरिंग सिस्टम सेटअप
let score = 0;
function animate() {
requestAnimationFrame(animate);
if (moveLeft) playerCube.position.x -= 0.05;
if (moveRight) playerCube.position.x += 0.05;
obstacle1.position.z += 0.05;
obstacle2.position.z += 0.05;
if (obstacle1.position.z > 5) {
obstacle1.position.z = -5;
score++;
}
if (obstacle2.position.z > 5) {
obstacle2.position.z = -5;
score++;
}
if (detectCollision(playerCube, obstacle1) || detectCollision(playerCube, obstacle2)) {
console.log('Game Over');
console.log('Final Score: ', score);
// यहां गेम ओवर लॉजिक जोड़ें
}
console.log('Score: ', score);
renderer.render(scene, camera);
}
animate();
एनिमेशन और इंटरएक्शन लागू करना (Implementing Animation and Interaction)
एनिमेशन और इंटरएक्शन किसी भी 3D गेम का दिल होते हैं, जो उपयोगकर्ता को एक इंटरैक्टिव और इमर्सिव अनुभव प्रदान करते हैं। Three.js का उपयोग करके, आप अपने 3D गेम में ऑब्जेक्ट्स को एनिमेट कर सकते हैं और उपयोगकर्ता के इनपुट के आधार पर इंटरैक्शन जोड़ सकते हैं। इस सेक्शन में, हम सीखेंगे कि कैसे आप अपने गेम में एनिमेशन और इंटरएक्शन को प्रभावी ढंग से लागू कर सकते हैं।
1. ऑब्जेक्ट्स को एनिमेट करना (Animating Objects)
ऑब्जेक्ट्स को एनिमेट करने के लिए, आप Three.js के requestAnimationFrame का उपयोग कर सकते हैं। यह फ़ंक्शन आपको निरंतर एनिमेशन लूप बनाने में मदद करता है, जिससे आपके गेम के ऑब्जेक्ट्स को स्मूथ और रियल-टाइम में एनिमेट किया जा सकता है।
उदाहरण: क्यूब का निरंतर रोटेशन एनिमेट करना
function animate() {
requestAnimationFrame(animate);
// क्यूब को X और Y अक्षों पर घुमाएं
playerCube.rotation.x += 0.01;
playerCube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
इस कोड में, animate() फ़ंक्शन को requestAnimationFrame द्वारा बार-बार कॉल किया जाता है, जिससे क्यूब निरंतर घुमता रहता है।
2. उपयोगकर्ता इंटरएक्शन जोड़ना (Adding User Interaction)
उपयोगकर्ता इंटरएक्शन जोड़ने के लिए, आप कीबोर्ड, माउस, या टच इनपुट का उपयोग कर सकते हैं। उदाहरण के लिए, खिलाड़ी क्यूब को कीबोर्ड के एरो कीज़ से मूव करना।
उदाहरण: कीबोर्ड से क्यूब को मूव करना
let moveLeft = false;
let moveRight = false;
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft') moveLeft = true;
if (event.key === 'ArrowRight') moveRight = true;
});
document.addEventListener('keyup', (event) => {
if (event.key === 'ArrowLeft') moveLeft = false;
if (event.key === 'ArrowRight') moveRight = false;
});
function animate() {
requestAnimationFrame(animate);
// खिलाड़ी क्यूब को बाएं और दाएं मूव करें
if (moveLeft) playerCube.position.x -= 0.05;
if (moveRight) playerCube.position.x += 0.05;
renderer.render(scene, camera);
}
animate();
इस कोड में, खिलाड़ी क्यूब बाएं और दाएं मूव करेगा जब उपयोगकर्ता कीबोर्ड पर ArrowLeft या ArrowRight की दबाएगा।
3. टकराव की पहचान और प्रतिक्रिया (Collision Detection and Response)
टकराव की पहचान और प्रतिक्रिया गेम में महत्वपूर्ण होती है, खासकर जब खिलाड़ियों को बाधाओं से बचना होता है। आप THREE.Box3 का उपयोग करके ऑब्जेक्ट्स के बीच टकराव की पहचान कर सकते हैं।
उदाहरण: टकराव की पहचान
function detectCollision(player, obstacle) {
const playerBox = new THREE.Box3().setFromObject(player);
const obstacleBox = new THREE.Box3().setFromObject(obstacle);
return playerBox.intersectsBox(obstacleBox);
}
function animate() {
requestAnimationFrame(animate);
if (moveLeft) playerCube.position.x -= 0.05;
if (moveRight) playerCube.position.x += 0.05;
// बाधाओं को आगे की ओर मूव करें
obstacle1.position.z += 0.05;
obstacle2.position.z += 0.05;
// टकराव की पहचान
if (detectCollision(playerCube, obstacle1) || detectCollision(playerCube, obstacle2)) {
console.log('Game Over');
// टकराव की स्थिति में प्रतिक्रिया दें
}
renderer.render(scene, camera);
}
animate();
इस कोड में, यदि खिलाड़ी का क्यूब किसी बाधा से टकराता है, तो Game Over संदेश दिखाया जाएगा। आप इस प्रतिक्रिया को और अधिक विकसित कर सकते हैं, जैसे कि गेम को रीसेट करना या स्कोर प्रदर्शित करना।
4. एनिमेशन और इंटरएक्शन का संयोजन (Combining Animation and Interaction)
अब हम एनिमेशन और इंटरएक्शन को एक साथ मिलाकर गेमप्ले के अनुभव को बेहतर बना सकते हैं। उदाहरण के लिए, खिलाड़ी क्यूब को बाधाओं से बचाते हुए स्कोरिंग कर सकता है।
उदाहरण: स्कोरिंग के साथ एनिमेशन और इंटरएक्शन
let score = 0;
function animate() {
requestAnimationFrame(animate);
if (moveLeft) playerCube.position.x -= 0.05;
if (moveRight) playerCube.position.x += 0.05;
obstacle1.position.z += 0.05;
obstacle2.position.z += 0.05;
if (obstacle1.position.z > 5) {
obstacle1.position.z = -5;
score++;
}
if (obstacle2.position.z > 5) {
obstacle2.position.z = -5;
score++;
}
if (detectCollision(playerCube, obstacle1) || detectCollision(playerCube, obstacle2)) {
console.log('Game Over');
console.log('Final Score: ', score);
}
console.log('Score: ', score);
renderer.render(scene, camera);
}
animate();
फाइनल प्रोजेक्ट का डेमो (Final Project Demo)
यहाँ पर हम Three.js का उपयोग करके एक सरल 3D गेम का फाइनल डेमो तैयार करेंगे। इस डेमो में हमने उन सभी तत्वों का उपयोग किया है जो हमने पिछले चरणों में सीखे हैं: 3D ऑब्जेक्ट्स का निर्माण, एनिमेशन, उपयोगकर्ता इंटरएक्शन, टकराव की पहचान, और स्कोरिंग सिस्टम।
1. HTML और JavaScript सेटअप
सबसे पहले, हम HTML और JavaScript कोड का बेसिक सेटअप करेंगे। यह सेटअप गेम को ब्राउज़र में चलाने के लिए आवश्यक है।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Simple 3D Game</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
#score { position: absolute; top: 10px; left: 10px; color: white; font-size: 20px; }
</style>
</head>
<body>
<div id="score">Score: 0</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// सीन, कैमरा, और रेंडरर सेटअप करें
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// खिलाड़ी का क्यूब बनाएं
const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const playerCube = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(playerCube);
// कुछ बाधाएं बनाएं
const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1);
const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const obstacle1 = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
obstacle1.position.set(3, 0, -5);
scene.add(obstacle1);
const obstacle2 = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
obstacle2.position.set(-3, 0, -5);
scene.add(obstacle2);
camera.position.z = 5;
// स्कोर और मूवमेंट वेरिएबल्स
let score = 0;
let moveLeft = false;
let moveRight = false;
// कीबोर्ड इवेंट्स
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft') moveLeft = true;
if (event.key === 'ArrowRight') moveRight = true;
});
document.addEventListener('keyup', (event) => {
if (event.key === 'ArrowLeft') moveLeft = false;
if (event.key === 'ArrowRight') moveRight = false;
});
// टकराव की पहचान फंक्शन
function detectCollision(player, obstacle) {
const playerBox = new THREE.Box3().setFromObject(player);
const obstacleBox = new THREE.Box3().setFromObject(obstacle);
return playerBox.intersectsBox(obstacleBox);
}
// एनिमेशन लूप
function animate() {
requestAnimationFrame(animate);
if (moveLeft) playerCube.position.x -= 0.05;
if (moveRight) playerCube.position.x += 0.05;
obstacle1.position.z += 0.05;
obstacle2.position.z += 0.05;
if (obstacle1.position.z > 5) {
obstacle1.position.z = -5;
score++;
}
if (obstacle2.position.z > 5) {
obstacle2.position.z = -5;
score++;
}
if (detectCollision(playerCube, obstacle1) || detectCollision(playerCube, obstacle2)) {
alert('Game Over! Your final score is: ' + score);
// गेम रीसेट करें
score = 0;
obstacle1.position.z = -5;
obstacle2.position.z = -5;
}
// स्कोर अपडेट करें
document.getElementById('score').textContent = 'Score: ' + score;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
2. कोड व्याख्या (Code Explanation)
- 3D ऑब्जेक्ट्स का निर्माण: हमने
playerCubeनामक एक हरे रंग का क्यूब औरobstacle1औरobstacle2नामक लाल रंग की बाधाएं बनाई हैं। ये ऑब्जेक्ट्स गेम के प्रमुख तत्व हैं। - एनिमेशन: हमने
requestAnimationFrameका उपयोग करके एक निरंतर एनिमेशन लूप बनाया है। यह लूप खिलाड़ी के क्यूब को बाएं और दाएं मूव करने और बाधाओं को आगे की ओर मूव करने के लिए उपयोग किया जाता है। - इंटरएक्शन: कीबोर्ड के एरो कीज़ (
ArrowLeftऔरArrowRight) का उपयोग करके खिलाड़ी क्यूब को बाएं और दाएं मूव कर सकता है। - टकराव की पहचान: हमने एक
detectCollisionफ़ंक्शन बनाया है, जो यह पहचानता है कि खिलाड़ी का क्यूब किसी बाधा से टकरा रहा है या नहीं। टकराव की स्थिति में गेम ओवर हो जाता है और स्कोर रीसेट हो जाता है। - स्कोरिंग सिस्टम: प्रत्येक बाधा से बचने पर स्कोर बढ़ता है, और यह स्कोर स्क्रीन पर दिखाया जाता है।
3. गेमप्ले (Gameplay)
इस फाइनल प्रोजेक्ट डेमो में:
- खिलाड़ी का क्यूब बाएं और दाएं मूव कर सकता है।
- स्क्रीन पर लगातार बाधाएं आ रही हैं, और खिलाड़ी को उनसे बचना है।
- हर बार जब खिलाड़ी किसी बाधा से बचता है, तो स्कोर बढ़ता है।
- यदि खिलाड़ी किसी बाधा से टकराता है, तो गेम ओवर हो जाता है और स्कोर रीसेट हो जाता है।