Three.js: मूवमेंट और एनिमेशन (Movement and Animation)

इस ट्यूटोरियल में हम Three.js में 3D ऑब्जेक्ट्स को मूव करने और उन्हें एनिमेट करने के तरीके के बारे में जानेंगे। मूवमेंट और एनिमेशन आपके 3D सीन को जीवंत और इंटरैक्टिव बनाने में महत्वपूर्ण भूमिका निभाते हैं। हम सीखेंगे कि कैसे ऑब्जेक्ट्स को घुमाया जाए, उनकी स्थिति बदली जाए, और उन्हें एक निरंतर एनिमेशन लूप में रखा जाए। यह ट्यूटोरियल आपको Three.js के माध्यम से अपने 3D प्रोजेक्ट्स में एनिमेशन को प्रभावी रूप से लागू करने में मदद करेगा।

3D ऑब्जेक्ट्स को घुमाना और हिलाना (Rotating and Moving 3D Objects)

Three.js में 3D ऑब्जेक्ट्स को घुमाना (Rotating) और हिलाना (Moving) एक बुनियादी लेकिन महत्वपूर्ण कौशल है, जिससे आप अपने 3D सीन में इंटरैक्टिविटी और डायनामिज़्म ला सकते हैं। इस सेक्शन में, हम सीखेंगे कि Three.js में 3D ऑब्जेक्ट्स की पोज़िशन, रोटेशन, और स्केल को कैसे नियंत्रित किया जाता है।

1. ऑब्जेक्ट्स को हिलाना (Moving Objects)

Three.js में 3D ऑब्जेक्ट्स की पोज़िशन को उनके position प्रॉपर्टी के माध्यम से नियंत्रित किया जाता है। प्रत्येक ऑब्जेक्ट में तीन पोज़िशन वैल्यूज़ होती हैं: x, y, और z, जो उसे 3D स्पेस में निर्देशित करती हैं।

उदाहरण:

// क्यूब का निर्माण
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// क्यूब को x और y अक्षों पर हिलाना
cube.position.x = 2; // x-अक्ष पर क्यूब को 2 यूनिट आगे बढ़ाएं
cube.position.y = 1; // y-अक्ष पर क्यूब को 1 यूनिट ऊपर ले जाएं

मुख्य विशेषताएँ:

• position.x: ऑब्जेक्ट को x-अक्ष पर हिलाने के लिए।
• position.y: ऑब्जेक्ट को y-अक्ष पर हिलाने के लिए।
• position.z: ऑब्जेक्ट को z-अक्ष पर हिलाने के लिए।

2. ऑब्जेक्ट्स को घुमाना (Rotating Objects)

ऑब्जेक्ट्स को घुमाने के लिए Three.js में rotation प्रॉपर्टी का उपयोग किया जाता है। यह प्रॉपर्टी रोटेशन वैल्यूज़ को रैडियन (radians) में स्वीकार करती है, जिससे ऑब्जेक्ट्स को x, y, और z अक्षों पर घुमाया जा सकता है।

उदाहरण:

// क्यूब को x और y अक्षों पर घुमाना
cube.rotation.x = Math.PI / 4; // क्यूब को x-अक्ष पर 45 डिग्री घुमाएं
cube.rotation.y = Math.PI / 4; // क्यूब को y-अक्ष पर 45 डिग्री घुमाएं

मुख्य विशेषताएँ:

• rotation.x: ऑब्जेक्ट को x-अक्ष पर घुमाने के लिए।
• rotation.y: ऑब्जेक्ट को y-अक्ष पर घुमाने के लिए।
• rotation.z: ऑब्जेक्ट को z-अक्ष पर घुमाने के लिए।

3. ऑब्जेक्ट्स का स्केल बदलना (Scaling Objects)

ऑब्जेक्ट्स के आकार को बदलने के लिए scale प्रॉपर्टी का उपयोग किया जाता है। यह प्रॉपर्टी ऑब्जेक्ट्स को x, y, और z अक्षों पर स्केल करने के लिए इस्तेमाल की जाती है।

उदाहरण:

// क्यूब के आकार को x और y अक्षों पर बदलना
cube.scale.x = 2; // x-अक्ष पर क्यूब का आकार दोगुना करें
cube.scale.y = 0.5; // y-अक्ष पर क्यूब का आकार आधा करें

मुख्य विशेषताएँ:

• scale.x: ऑब्जेक्ट का x-अक्ष पर स्केल बदलने के लिए।
• scale.y: ऑब्जेक्ट का y-अक्ष पर स्केल बदलने के लिए।
• scale.z: ऑब्जेक्ट का z-अक्ष पर स्केल बदलने के लिए।

4. एनिमेशन लूप में मूवमेंट और रोटेशन

Three.js में मूवमेंट और रोटेशन को एनिमेट करने के लिए, इन प्रॉपर्टीज़ को एक एनिमेशन लूप में लगातार अपडेट किया जा सकता है।

उदाहरण:

function animate() {
    requestAnimationFrame(animate);

    // क्यूब को घुमाना और हिलाना
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.position.x += 0.01;

    renderer.render(scene, camera);
}

animate(); // एनिमेशन लूप शुरू करें

इस उदाहरण में, क्यूब को x और y अक्षों पर लगातार घुमाया जा रहा है, साथ ही उसे x-अक्ष पर धीरे-धीरे आगे बढ़ाया जा रहा है।

एनिमेशन लूप (Animation Loop)

Three.js में एनिमेशन लूप (Animation Loop) वह प्रक्रिया है, जिसके माध्यम से 3D सीन में लगातार बदलाव किए जाते हैं और स्क्रीन पर अपडेट किए जाते हैं। इस लूप के माध्यम से आप अपने 3D ऑब्जेक्ट्स को घुमा सकते हैं, हिला सकते हैं, और अन्य एनिमेशन इफेक्ट्स लागू कर सकते हैं। एनिमेशन लूप Three.js के सबसे महत्वपूर्ण पहलुओं में से एक है, क्योंकि यह आपके 3D सीन को गतिशील और इंटरैक्टिव बनाता है।

एनिमेशन लूप का महत्व

एनिमेशन लूप के बिना, आपका 3D सीन स्थिर रहेगा और उसमें कोई भी परिवर्तन नहीं दिखेगा। एनिमेशन लूप का उपयोग करके आप लगातार फ्रेम्स को रेंडर कर सकते हैं, जिससे ऑब्जेक्ट्स के मूवमेंट और अन्य एनिमेशन प्रभाव उत्पन्न होते हैं।

एनिमेशन लूप सेटअप करना

Three.js में एनिमेशन लूप को सेटअप करना बहुत सरल है। आप requestAnimationFrame फंक्शन का उपयोग करके इसे आसानी से लागू कर सकते हैं। requestAnimationFrame ब्राउज़र को एक एनिमेशन को फिर से ड्रॉ करने के लिए कहता है और इसे प्रदर्शन के अनुकूल बनाता है।

उदाहरण:

function animate() {
    requestAnimationFrame(animate); // अगला फ्रेम रेंडर करने के लिए अनुरोध करें

    // ऑब्जेक्ट्स को घुमाने या हिलाने के लिए कोड
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // सीन को रेंडर करें
    renderer.render(scene, camera);
}

animate(); // एनिमेशन लूप शुरू करें

requestAnimationFrame का उपयोग

requestAnimationFrame एक ब्राउज़र API है, जो आपको 60 फ्रेम्स प्रति सेकंड (FPS) की दर से एनिमेशन चलाने की अनुमति देता है। इसका उपयोग करके, आप अपने एनिमेशन को ब्राउज़र के प्रदर्शन के अनुसार सुचारू रूप से चला सकते हैं।

मुख्य विशेषताएँ:

• ऑटोमेटिक फ्रेम रेट: requestAnimationFrame ऑटोमेटिक रूप से आपके एनिमेशन को 60 FPS पर सेट करता है, जो स्मूथ एनिमेशन के लिए आदर्श है।
• CPU उपयोग को कम करना: जब टैब इनएक्टिव होता है, तो requestAnimationFrame एनिमेशन को धीमा कर देता है, जिससे CPU उपयोग को कम किया जा सकता है।
• स्टैंडर्ड प्रैक्टिस: यह आधुनिक वेब एनीमेशन के लिए स्टैंडर्ड तरीका है और सभी प्रमुख ब्राउज़रों द्वारा समर्थित है।

एनिमेशन लूप में मूवमेंट और रोटेशन लागू करना

एनिमेशन लूप के भीतर, आप ऑब्जेक्ट्स की पोज़िशन, रोटेशन, और अन्य प्रॉपर्टीज़ को लगातार अपडेट कर सकते हैं। यह आपको लगातार चलने वाली एनिमेशन और मूवमेंट प्रभाव उत्पन्न करने की अनुमति देता है।

उदाहरण:

function animate() {
    requestAnimationFrame(animate); // अगला फ्रेम रेंडर करने के लिए अनुरोध करें

    // क्यूब को x और y अक्षों पर घुमाना
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // क्यूब को x-अक्ष पर हिलाना
    cube.position.x += 0.01;

    // सीन को रेंडर करें
    renderer.render(scene, camera);
}

animate(); // एनिमेशन लूप शुरू करें

इस उदाहरण में, animate फंक्शन लगातार कॉल हो रहा है, जिससे क्यूब लगातार घुमाया और हिलाया जा रहा है। यह एनिमेशन तब तक चलता रहेगा जब तक आप पेज को बंद नहीं कर देते या लूप को मैन्युअल रूप से रोक नहीं देते।

लूप में अन्य एनिमेशन लागू करना

आप इस एनिमेशन लूप में किसी भी प्रकार के एनिमेशन लागू कर सकते हैं, जैसे कि:

• ऑब्जेक्ट्स को स्केल करना (Scaling Objects)
• कैमरा मूवमेंट (Camera Movement)
• लाइटिंग इफेक्ट्स (Lighting Effects)

टाइमर और फ्रेम रेट (Timers and Frame Rate)

Three.js में टाइमर (Timers) और फ्रेम रेट (Frame Rate) को समझना और सही तरीके से उपयोग करना आपके 3D सीन में स्मूथ और प्रभावी एनिमेशन के लिए बहुत महत्वपूर्ण है। फ्रेम रेट आपके एनिमेशन की स्मूदनेस को निर्धारित करता है, जबकि टाइमर का उपयोग एनिमेशन को समयबद्ध और नियंत्रित करने के लिए किया जाता है।

1. फ्रेम रेट (Frame Rate) क्या है?

फ्रेम रेट वह माप है, जो यह दर्शाता है कि एक सेकंड में कितने फ्रेम्स (इमेजेस) रेंडर किए जा रहे हैं। यह आमतौर पर फ्रेम्स प्रति सेकंड (Frames Per Second – FPS) में मापा जाता है। उच्च फ्रेम रेट का मतलब है कि एनिमेशन स्मूथ दिखाई देगा, जबकि कम फ्रेम रेट से एनिमेशन झटकेदार (choppy) लग सकता है।

आदर्श फ्रेम रेट:

• 60 FPS: सामान्यत: स्मूथ और रियल-टाइम एनिमेशन के लिए।
• 30 FPS: ठीक-ठाक अनुभव के लिए, लेकिन बहुत स्मूथ नहीं।
• 24 FPS: सिनेमाई अनुभव के लिए, हालांकि यह कम स्मूथ हो सकता है।

2. फ्रेम रेट को कंट्रोल करना

फ्रेम रेट को नियंत्रित करने के लिए, आप requestAnimationFrame के साथ setTimeout या setInterval का उपयोग कर सकते हैं। यह आपको अपने एनिमेशन के फ्रेम रेट को सही समयबद्धता के साथ सेट करने की अनुमति देता है।

उदाहरण: 30 FPS पर एनिमेशन सेट करना

const fps = 30;
const interval = 1000 / fps;

let lastTime = 0;

function animate(time) {
    requestAnimationFrame(animate);

    if (time - lastTime >= interval) {
        lastTime = time;

        // यहां पर एनिमेशन कोड जोड़ें
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
    }
}

animate(0); // एनिमेशन लूप शुरू करें

इस कोड में, एनिमेशन को 30 FPS पर सेट किया गया है, जिससे यह सुनिश्चित होता है कि फ्रेम्स उस दर पर अपडेट हो रहे हैं।

3. टाइमर (Timers) का उपयोग करना

टाइमर का उपयोग विशेष एनिमेशन प्रभावों को समयबद्ध करने के लिए किया जा सकता है, जैसे कि कुछ समय के बाद एक ऑब्जेक्ट का मूव होना, रंग बदलना, या गायब होना। JavaScript में, setTimeout और setInterval टाइमर सेट करने के लिए सामान्यत: उपयोग किए जाते हैं।

उदाहरण:

// 2 सेकंड बाद क्यूब का रंग बदलना
setTimeout(() => {
    cube.material.color.set(0xff0000); // रंग को लाल कर दें
}, 2000);

// हर 1 सेकंड में क्यूब को थोड़ा घुमाना
setInterval(() => {
    cube.rotation.y += 0.1;
}, 1000);

मुख्य टाइमर फ़ंक्शन्स:

• setTimeout(callback, delay): एक बार देरी के बाद कोड को निष्पादित करता है।
• setInterval(callback, interval): एक निश्चित अंतराल के बाद बार-बार कोड निष्पादित करता है।

4. फ्रेम रेट और प्रदर्शन (Performance) का संबंध

फ्रेम रेट का सीधा संबंध आपके सिस्टम के प्रदर्शन से होता है। यदि आपके एनिमेशन में बहुत सारी जटिल गणनाएँ हैं या बहुत सारे ऑब्जेक्ट्स हैं, तो फ्रेम रेट कम हो सकता है। इस स्थिति में, आपको एनिमेशन को अनुकूलित करना होगा ताकि यह स्मूथ चल सके।

फ्रेम रेट को अनुकूलित करने के सुझाव:

• कम्प्लेक्सिटी कम करें: बहुत अधिक पॉलीगॉन या शेडर्स का उपयोग करने से बचें।
• ड्रॉ कॉल्स को कम करें: जितना हो सके, कम से कम ड्रॉ कॉल्स करें।
• लोवर रिज़ॉल्यूशन: आवश्यकता के अनुसार, रिज़ॉल्यूशन को कम करें।
• फ्रेम रेट की निगरानी: विभिन्न उपकरणों का उपयोग करके फ्रेम रेट की निगरानी करें, जैसे कि stats.js।

5. फ्रेम रेट और टाइमर का संयुक्त उपयोग

आप अपने एनिमेशन में फ्रेम रेट और टाइमर दोनों का उपयोग करके अधिक प्रभावी एनिमेशन बना सकते हैं। उदाहरण के लिए, आप टाइमर का उपयोग करके कुछ समय के बाद किसी ऑब्जेक्ट का मूवमेंट या रोटेशन बदल सकते हैं, और फ्रेम रेट का उपयोग करके यह सुनिश्चित कर सकते हैं कि एनिमेशन स्मूथ रहे।

Tween.js का उपयोग (Using Tween.js for Smooth Animations)

Three.js में Tween.js एक शक्तिशाली एनिमेशन लाइब्रेरी है, जिसका उपयोग 3D ऑब्जेक्ट्स के मूवमेंट, रोटेशन, स्केल, और अन्य प्रॉपर्टीज़ को स्मूथ और नियंत्रित तरीके से एनिमेट करने के लिए किया जाता है। यह आपको जटिल एनिमेशन प्रभावों को सरल और प्रभावी ढंग से लागू करने में मदद करता है।

Tween.js का परिचय

Tween.js एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है, जिसे विशेष रूप से Tweening (Intermediate Animation Frames) के लिए डिज़ाइन किया गया है। इसके माध्यम से आप किसी ऑब्जेक्ट की प्रारंभिक स्थिति से अंतिम स्थिति तक एनिमेट कर सकते हैं, और यह ऑटोमेटिक रूप से बीच के फ्रेम्स की गणना कर लेता है।

Tween.js को प्रोजेक्ट में शामिल करना

Tween.js को अपने प्रोजेक्ट में शामिल करने के लिए, आप इसे CDN के माध्यम से लोड कर सकते हैं या NPM का उपयोग कर सकते हैं।

CDN के माध्यम से शामिल करना:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script>

Tween.js का उपयोग करना

Tween.js का उपयोग करने के लिए, आपको एक नए TWEEN.Tween ऑब्जेक्ट का निर्माण करना होता है। यह ऑब्जेक्ट उस प्रॉपर्टी को टार्गेट करता है, जिसे आप एनिमेट करना चाहते हैं। इसके बाद, आप .to() मेथड का उपयोग करके एनिमेशन की अंतिम स्थिति और उसकी अवधि (ड्यूरेशन) सेट कर सकते हैं।

उदाहरण: क्यूब की पोज़िशन एनिमेट करना

// क्यूब का निर्माण
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// क्यूब की पोज़िशन को एनिमेट करना
const tween = new TWEEN.Tween(cube.position) // क्यूब की पोज़िशन को टार्गेट करें
    .to({ x: 5, y: 2, z: 0 }, 2000) // अंतिम स्थिति और अवधि सेट करें
    .easing(TWEEN.Easing.Quadratic.Out) // स्मूथ एनिमेशन के लिए ईज़िंग फ़ंक्शन
    .start(); // एनिमेशन शुरू करें

function animate() {
    requestAnimationFrame(animate);
    TWEEN.update(); // Tween.js अपडेट करें
    renderer.render(scene, camera);
}

animate(); // एनिमेशन लूप शुरू करें

Tween.js के प्रमुख तत्व

1. Tween ऑब्जेक्ट बनाना:
   • new TWEEN.Tween(object.property) का उपयोग करके आप उस प्रॉपर्टी को टार्गेट कर सकते हैं जिसे आप एनिमेट करना चाहते हैं।
2. to() मेथड:
   • .to({property: value}, duration) का उपयोग करके आप एनिमेशन की अंतिम स्थिति और उसकी अवधि (मिलीसेकंड्स में) सेट कर सकते हैं।
3. ईज़िंग फ़ंक्शन्स (Easing Functions):
   • Tween.js में कई प्रकार के ईज़िंग फ़ंक्शन्स होते हैं, जैसे कि Linear, Quadratic, Cubic, आदि, जो एनिमेशन की स्मूदनेस को नियंत्रित करते हैं।
   • Example: .easing(TWEEN.Easing.Quadratic.Out)
4. डिले और रिपीट:
   • .delay(time) का उपयोग करके आप एनिमेशन को शुरू करने से पहले देरी कर सकते हैं।
   • .repeat(times) का उपयोग करके आप एनिमेशन को कितनी बार दोहराना है, यह सेट कर सकते हैं।

उदाहरण: क्यूब का रंग बदलना और पोज़िशन को रिपीट करना

const tweenColor = new TWEEN.Tween(cube.material.color)
    .to({ r: 1, g: 0, b: 0 }, 1000) // रंग को हरे से लाल में बदलें
    .easing(TWEEN.Easing.Cubic.InOut)
    .start();

const tweenPosition = new TWEEN.Tween(cube.position)
    .to({ x: -5 }, 2000) // पोज़िशन को बाएँ की ओर ले जाएं
    .repeat(Infinity) // एनिमेशन को अनंत बार रिपीट करें
    .yoyo(true) // पोज़िशन को वापस लाएं
    .start();

function animate() {
    requestAnimationFrame(animate);
    TWEEN.update(); // Tween.js अपडेट करें
    renderer.render(scene, camera);
}

animate(); // एनिमेशन लूप शुरू करें

Tween.js के अन्य उपयोग

• चेनिंग: आप एक साथ कई एनिमेशन को चेन कर सकते हैं, ताकि एक एनिमेशन के बाद दूसरा शुरू हो।
• कस्टम इवेंट्स: Tween.js में आप कस्टम इवेंट्स भी सेट कर सकते हैं, जैसे कि एनिमेशन समाप्त होने पर कुछ और एक्शन लेना।