Three.js: लोडिंग और मैनिपुलेटिंग 3D मॉडल्स (Loading and Manipulating 3D Models)

इस ट्यूटोरियल में, हम Three.js के माध्यम से लोडिंग और मैनिपुलेटिंग 3D मॉडल्स (Loading and Manipulating 3D Models) के बारे में जानेंगे। 3D मॉडल्स को लोड करना और उन्हें अपने सीन में मैनिपुलेट करना आपके 3D प्रोजेक्ट्स का एक महत्वपूर्ण हिस्सा है। इस ट्यूटोरियल में, हम सीखेंगे कि विभिन्न फॉर्मेट्स के 3D मॉडल्स को Three.js में कैसे लोड किया जाए, और उन्हें कैसे स्केल, रोटेट, और पोजिशन किया जाए। Loading and Manipulating 3D Models की यह गाइड आपको आपके 3D सीन में रियलिस्टिक और इंटरैक्टिव मॉडल्स को इंटीग्रेट करने में मदद करेगी।

OBJ, GLTF, और अन्य 3D मॉडल फाइल्स लोड करना

Three.js में 3D मॉडल्स को लोड करने के लिए विभिन्न प्रकार की फाइल फॉर्मेट्स का उपयोग किया जाता है। OBJ और GLTF फॉर्मेट्स सबसे लोकप्रिय फॉर्मेट्स में से हैं, जिनका उपयोग 3D मॉडल्स को लोड और मैनिपुलेट करने के लिए किया जाता है। इस सेक्शन में, हम Three.js में OBJ, GLTF, और अन्य 3D मॉडल फाइल्स को लोड करने के तरीके पर चर्चा करेंगे।

1. OBJ फाइल्स लोड करना (Loading OBJ Files)

OBJ (Wavefront .obj) फॉर्मेट एक बहुत ही सामान्य फॉर्मेट है, जिसका उपयोग 3D मॉडल्स को स्टोर करने के लिए किया जाता है। Three.js में OBJ फाइल्स को लोड करने के लिए OBJLoader का उपयोग किया जाता है।

उदाहरण:

// OBJLoader को इम्पोर्ट करें
const objLoader = new THREE.OBJLoader();

// OBJ फाइल लोड करें
objLoader.load('path/to/your/model.obj', function(object) {
    scene.add(object); // मॉडल को सीन में जोड़ें
    object.position.set(0, 0, 0); // मॉडल की पोज़िशन सेट करें
});

विशेषताएँ:

• सपोर्टेड टेक्सचर्स: OBJ फाइल्स में टेक्सचर्स और मटेरियल्स को लोड करने के लिए .mtl फाइल्स का भी उपयोग किया जा सकता है।
• सरलता: OBJ फाइल्स पढ़ने और समझने में सरल होती हैं, लेकिन इनमें एनीमेशन डेटा नहीं होता।

2. GLTF/GLB फाइल्स लोड करना (Loading GLTF/GLB Files)

GLTF (GL Transmission Format) और GLB फॉर्मेट्स आधुनिक 3D मॉडल्स के लिए बनाए गए हैं, जो टेक्सचर्स, मैटेरियल्स, एनीमेशन, और लाइटिंग की जानकारी को प्रभावी तरीके से स्टोर करते हैं। Three.js में GLTF और GLB फाइल्स को लोड करने के लिए GLTFLoader का उपयोग किया जाता है।

उदाहरण:

// GLTFLoader को इम्पोर्ट करें
const gltfLoader = new THREE.GLTFLoader();

// GLTF/GLB फाइल लोड करें
gltfLoader.load('path/to/your/model.gltf', function(gltf) {
    const model = gltf.scene;
    scene.add(model); // मॉडल को सीन में जोड़ें
    model.position.set(0, 0, 0); // मॉडल की पोज़िशन सेट करें
});

विशेषताएँ:

• एनीमेशन सपोर्ट: GLTF और GLB फाइल्स में एनीमेशन डेटा भी हो सकता है, जिससे आपको डायनामिक 3D मॉडल्स मिलते हैं।
• कम्प्रेशन: GLB फाइल्स GLTF का कम्प्रेस्ड वर्ज़न होती हैं, जो लोडिंग टाइम को कम करती हैं।
• उच्च-गुणवत्ता: ये फॉर्मेट्स हाई-फिडेलिटी रेंडरिंग के लिए उपयुक्त हैं।

3. अन्य 3D मॉडल फाइल्स लोड करना (Loading Other 3D Model Files)

Three.js अन्य 3D मॉडल फाइल फॉर्मेट्स को भी सपोर्ट करता है, जैसे कि FBX, Collada (DAE), PLY, और STL। हर फॉर्मेट के लिए एक विशेष लोडर होता है, जो फाइल को लोड करने और सीन में जोड़ने के लिए उपयोग किया जाता है।

उदाहरण: FBX फाइल लोड करना

// FBXLoader को इम्पोर्ट करें
const fbxLoader = new THREE.FBXLoader();

// FBX फाइल लोड करें
fbxLoader.load('path/to/your/model.fbx', function(object) {
    scene.add(object); // मॉडल को सीन में जोड़ें
    object.position.set(0, 0, 0); // मॉडल की पोज़िशन सेट करें
});

उदाहरण: STL फाइल लोड करना

// STLLoader को इम्पोर्ट करें
const stlLoader = new THREE.STLLoader();

// STL फाइल लोड करें
stlLoader.load('path/to/your/model.stl', function(geometry) {
    const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh); // मॉडल को सीन में जोड़ें
    mesh.position.set(0, 0, 0); // पोज़िशन सेट करें
});

4. 3D मॉडल्स के साथ मैनिपुलेशन (Manipulating 3D Models)

मॉडल्स को सीन में लोड करने के बाद, आप उन्हें स्केल, रोटेट, और ट्रांसलेट कर सकते हैं। इसके लिए Three.js के position, rotation, और scale प्रॉपर्टीज़ का उपयोग किया जाता है।

उदाहरण:

// मॉडल को स्केल करना
model.scale.set(2, 2, 2);

// मॉडल को रोटेट करना
model.rotation.y = Math.PI / 4;

// मॉडल को पोज़िशन सेट करना
model.position.set(0, 1, 0);

Three.js के साथ मॉडल्स को एनिमेट करना

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

1. कस्टम एनिमेशन लूप (Custom Animation Loop)

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

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

function animate() {
    requestAnimationFrame(animate);

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

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

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

2. GLTF मॉडल्स में एनिमेशन (Animating GLTF Models)

GLTF मॉडल्स में पहले से ही एनीमेशन डेटा शामिल हो सकता है, जिसे Three.js में AnimationMixer के माध्यम से नियंत्रित किया जा सकता है। AnimationMixer का उपयोग करके आप मॉडल में मौजूद विभिन्न क्लिप्स को प्ले, स्टॉप, या पॉज़ कर सकते हैं।

उदाहरण: GLTF मॉडल का एनिमेशन

const gltfLoader = new THREE.GLTFLoader();

gltfLoader.load('path/to/your/model.gltf', function(gltf) {
    const model = gltf.scene;
    scene.add(model);

    const mixer = new THREE.AnimationMixer(model);
    const action = mixer.clipAction(gltf.animations[0]); // पहला एनीमेशन क्लिप
    action.play(); // एनीमेशन शुरू करें

    function animate() {
        requestAnimationFrame(animate);
        mixer.update(clock.getDelta()); // एनीमेशन को अपडेट करें
        renderer.render(scene, camera);
    }

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

3. Tween.js के साथ एनिमेशन (Animating with Tween.js)

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

उदाहरण: एक मॉडल की पोज़िशन को Tween.js के साथ एनिमेट करना

const tween = new TWEEN.Tween(model.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(); // एनिमेशन लूप शुरू करें

4. स्किन्ड एनिमेशन (Skinned Animation)

Three.js स्किन्ड एनिमेशन भी सपोर्ट करता है, जिसका उपयोग करेक्टर्स और जैविक मॉडलों में किया जाता है। स्किन्ड एनिमेशन में मॉडल के विभिन्न भागों (जैसे हाथ, पैर) को मूव करने के लिए हड्डियों (Bones) का उपयोग किया जाता है।

उदाहरण: स्किन्ड मॉडल का एनिमेशन

const mixer = new THREE.AnimationMixer(skinnedMesh);

const walkAction = mixer.clipAction(gltf.animations[0]);
walkAction.play();

function animate() {
    requestAnimationFrame(animate);
    mixer.update(clock.getDelta());
    renderer.render(scene, camera);
}

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

5. मॉडल्स के साथ इंटरेक्टिव एनिमेशन (Interactive Animation with Models)

आप एनिमेशन को इंटरेक्टिव भी बना सकते हैं, जैसे कि उपयोगकर्ता की इनपुट (जैसे माउस क्लिक या कीबोर्ड) के आधार पर मॉडल्स की पोज़िशन, रोटेशन, या स्केल बदलना।

उदाहरण: माउस क्लिक पर मॉडल को स्केल करना

window.addEventListener('click', () => {
    new TWEEN.Tween(model.scale)
        .to({ x: 2, y: 2, z: 2 }, 500) // स्केल को बढ़ाएं
        .easing(TWEEN.Easing.Elastic.Out)
        .start();
});

function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
    renderer.render(scene, camera);
}

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

Texture Maps और Bump Maps का उपयोग

Three.js में Texture Maps और Bump Maps का उपयोग 3D ऑब्जेक्ट्स की सतह को यथार्थवादी और विस्तृत बनाने के लिए किया जाता है। Texture Maps सतह के रंग और पैटर्न को परिभाषित करते हैं, जबकि Bump Maps सतह की बनावट और गहराई को सिमुलेट करते हैं। इन दोनों का सही उपयोग आपके 3D सीन को अधिक आकर्षक और वास्तविकता के करीब लाने में मदद करता है।

1. Texture Maps का उपयोग (Using Texture Maps)

Texture Maps 2D इमेजेज़ होती हैं, जो 3D ऑब्जेक्ट्स की सतह पर मैप की जाती हैं, जिससे ऑब्जेक्ट्स को एक विशिष्ट रंग, पैटर्न, या डिजाइन मिलता है। Three.js में Texture Maps को लोड करने के लिए TextureLoader का उपयोग किया जाता है।

उदाहरण:

// TextureLoader का उपयोग करके टेक्सचर लोड करें
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/texture.jpg');

// MeshStandardMaterial में टेक्सचर लागू करें
const material = new THREE.MeshStandardMaterial({ map: texture });
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

विशेषताएँ:

• सतह का रंग और पैटर्न: Texture Maps का उपयोग सतह के रंग और पैटर्न को परिभाषित करने के लिए किया जाता है।
• टेक्सचर मैपिंग: आप टेक्सचर को किसी भी 3D ज्योमेट्री पर मैप कर सकते हैं, जैसे कि क्यूब, स्फीयर, प्लेन, आदि।
• अनुकूलन: टेक्सचर का उपयोग करते समय आप रिपीटिंग, रैपिंग, और अन्य मैपिंग गुणों को भी नियंत्रित कर सकते हैं।

2. Bump Maps का उपयोग (Using Bump Maps)

Bump Maps एक विशेष प्रकार की ग्रेस्केल इमेज होती हैं, जो सतह पर छोटे-बड़े उभार (bumps) और गहराइयाँ (indentations) सिमुलेट करने के लिए उपयोग की जाती हैं। ये उभार वास्तव में ज्योमेट्री को नहीं बदलते, लेकिन लाइटिंग की गणना को बदलते हैं, जिससे सतह पर गहराई और बनावट का आभास होता है।

उदाहरण:

// Bump Map लोड करें
const bumpMap = textureLoader.load('path/to/your/bumpmap.jpg');

// MeshStandardMaterial में Bump Map लागू करें
const material = new THREE.MeshStandardMaterial({
    map: texture, // बेसिक टेक्सचर
    bumpMap: bumpMap, // बम्प मैप
    bumpScale: 0.2 // बम्प की गहराई
});

const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(sphereGeometry, material);

scene.add(sphere);

विशेषताएँ:

• सतह की बनावट: Bump Maps का उपयोग सतह की बनावट को सिमुलेट करने के लिए किया जाता है, जैसे कि पत्थर की सतह, कपड़े की बनावट, या लकड़ी की दरारें।
• लाइटिंग प्रभाव: Bump Maps सतह की बनावट को केवल लाइटिंग गणना के माध्यम से दिखाती हैं, जिससे ज्योमेट्री में बिना बदलाव किए गहराई का आभास होता है।
• बम्प स्केल: bumpScale प्रॉपर्टी का उपयोग बम्प इफेक्ट की गहराई को नियंत्रित करने के लिए किया जाता है।

3. Texture Maps और Bump Maps का संयोजन (Combining Texture Maps and Bump Maps)

Texture Maps और Bump Maps को एक साथ उपयोग करके आप ऑब्जेक्ट्स की सतह पर रंग, पैटर्न, और बनावट का सही संयोजन बना सकते हैं। यह तकनीक 3D मॉडल्स को यथार्थवादी और जटिल दिखाने में मदद करती है।

उदाहरण:

// Texture Map और Bump Map दोनों लागू करें
const material = new THREE.MeshStandardMaterial({
    map: texture, // सतह का रंग और पैटर्न
    bumpMap: bumpMap, // सतह की बनावट
    bumpScale: 0.5
});

const planeGeometry = new THREE.PlaneGeometry(5, 5);
const plane = new THREE.Mesh(planeGeometry, material);

scene.add(plane);

4. Normal Maps और Displacement Maps (Normal Maps and Displacement Maps)

Normal Maps और Displacement Maps भी सतह की बनावट और गहराई को सिमुलेट करने के लिए उपयोग किए जाते हैं:

• Normal Maps: यह Bump Maps के समान होते हैं लेकिन तीन चैनलों (RGB) का उपयोग करते हैं, जिससे अधिक सटीक और विस्तृत उभार और गहराइयाँ सिमुलेट होती हैं।
• Displacement Maps: यह वास्तव में सतह की ज्योमेट्री को बदल देते हैं, जिससे सतह पर उभार और गहराइयाँ वास्तविक रूप में दिखाई देती हैं।

उदाहरण:

// Normal Map का उपयोग
const normalMap = textureLoader.load('path/to/your/normalmap.jpg');
material.normalMap = normalMap;

// Displacement Map का उपयोग
const displacementMap = textureLoader.load('path/to/your/displacementmap.jpg');
material.displacementMap = displacementMap;
material.displacementScale = 0.3;