Three.js: कैमरा और रेंडरिंग (Camera and Rendering)

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

कैमरा प्रकार (Perspective और Orthographic)

Three.js में कैमरा (Camera) आपके 3D सीन को देखने का तरीका निर्धारित करता है। कैमरा का उपयोग यह तय करने के लिए किया जाता है कि सीन के कौन से हिस्से को स्क्रीन पर प्रदर्शित किया जाए और उसे किस एंगल से दिखाया जाए। Three.js में दो प्रमुख प्रकार के कैमरा उपलब्ध हैं: Perspective Camera और Orthographic Camera। दोनों कैमरा प्रकार का उपयोग विभिन्न प्रकार के 3D सीन के लिए किया जाता है, और उनकी विशेषताएँ भिन्न-भिन्न होती हैं।

1. परस्पेक्टिव कैमरा (Perspective Camera)

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

उदाहरण:

const camera = new THREE.PerspectiveCamera(
    75,                  // Field of view (FOV)
    window.innerWidth / window.innerHeight,  // Aspect ratio
    0.1,                // Near clipping plane
    1000                // Far clipping plane
);
camera.position.z = 5;  // कैमरा की स्थिति सेट करना

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

• Field of View (FOV): यह एंगल है जो बताता है कि कैमरा कितना चौड़ा दृश्य दिखाएगा।
• Aspect Ratio: यह स्क्रीन के अनुपात को निर्धारित करता है।
• Near and Far Clipping Plane: यह दूरी तय करता है कि कैमरा कितनी नजदीक और कितनी दूर की वस्तुओं को दिखाएगा।

कब उपयोग करें:

• जब आपको सीन में गहराई और वास्तविकता दिखानी हो।
• गेम्स, 3D एनिमेशन, और विज़ुअलाइज़ेशन के लिए आदर्श।

2. ऑर्थोग्राफिक कैमरा (Orthographic Camera)

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

उदाहरण:

const camera = new THREE.OrthographicCamera(
    -window.innerWidth / 2,  // Left
    window.innerWidth / 2,   // Right
    window.innerHeight / 2,  // Top
    -window.innerHeight / 2, // Bottom
    0.1,                     // Near clipping plane
    1000                     // Far clipping plane
);
camera.position.z = 5;  // कैमरा की स्थिति सेट करना

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

• Left, Right, Top, Bottom: यह कैमरा के फ्रस्ट्रम (दृश्य क्षेत्र) को निर्धारित करते हैं।
• No Perspective Distortion: वस्तुएँ अपनी वास्तविक आकार में दिखाई देती हैं, चाहे वे कितनी भी दूर हों।

कब उपयोग करें:

• जब आपको समान अनुपात में वस्तुओं को दिखाना हो।
• आर्किटेक्चरल विज़ुअलाइज़ेशन और 2D गेम्स के लिए उपयुक्त।

कैमरा कंट्रोल्स (OrbitControls)

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

OrbitControls को सेटअप करना

OrbitControls का उपयोग करने के लिए, आपको सबसे पहले Three.js के साथ OrbitControls.js फ़ाइल को अपने प्रोजेक्ट में शामिल करना होगा। इसे आप CDN के माध्यम से सीधे HTML में जोड़ सकते हैं या NPM के माध्यम से इंस्टॉल कर सकते हैं।

CDN के माध्यम से OrbitControls जोड़ना:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

OrbitControls का उपयोग करना

एक बार OrbitControls को शामिल कर लेने के बाद, इसे सेटअप करना बहुत आसान है। नीचे दिए गए कोड में दिखाया गया है कि कैसे आप इसे अपने सीन में लागू कर सकते हैं:

उदाहरण:

// सीन, कैमरा और रेंडरर सेटअप
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// OrbitControls को जोड़ें
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// ऑब्जेक्ट्स और लाइट्स जोड़ें
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// रेंडरिंग और एनिमेशन लूप
function animate() {
    requestAnimationFrame(animate);

    // कंट्रोल्स को अपडेट करें
    controls.update();

    renderer.render(scene, camera);
}

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

OrbitControls की मुख्य विशेषताएँ

1. कैमरा को घुमाना (Rotate):
   • उपयोगकर्ता माउस को ड्रैग करके कैमरा को सीन के चारों ओर घुमा सकता है।
   • यह सुविधा 3D मॉडल्स को सभी कोणों से देखने के लिए बहुत उपयोगी है।
2. ज़ूम इन/आउट (Zoom In/Out):
   • माउस स्क्रॉल के माध्यम से आप सीन में ज़ूम इन और ज़ूम आउट कर सकते हैं।
   • यह बड़ी या छोटी वस्तुओं का निरीक्षण करने के लिए आदर्श है।
3. पैन (Pan):
   • माउस के माध्यम से सीन में कैमरा को पैन किया जा सकता है, जिससे आप ऑब्जेक्ट्स को साइड में ले जाकर देख सकते हैं।
   • यह विशेष रूप से आर्किटेक्चरल विज़ुअलाइज़ेशन और 3D डिजाइनिंग में उपयोगी होता है।

OrbitControls के अन्य विकल्प

OrbitControls में कुछ अतिरिक्त विकल्प भी हैं, जिन्हें आप अपने अनुसार कस्टमाइज़ कर सकते हैं:

• controls.enableDamping = true;: स्मूद कैमरा मूवमेंट के लिए।
• controls.dampingFactor = 0.25;: डंपिंग की गति को नियंत्रित करता है।
• controls.screenSpacePanning = false;: पैनिंग को वर्टिकल या हॉरिजॉन्टल दिशा में सीमित करता है।
• controls.maxPolarAngle = Math.PI / 2;: कैमरा की वर्टिकल घुमाव सीमा निर्धारित करता है।

रेंडरिंग और रेंडरर (Rendering and Renderer)

Three.js में रेंडरिंग (Rendering) वह प्रक्रिया है, जिसमें 3D सीन को पिक्सल्स में बदलकर आपके कंप्यूटर स्क्रीन पर प्रदर्शित किया जाता है। रेंडरिंग के माध्यम से 3D ऑब्जेक्ट्स, लाइट्स, और कैमरा को एक साथ मिलाकर दृश्य उत्पन्न किया जाता है, जिसे उपयोगकर्ता देख सकता है। रेंडरर (Renderer) वह इंजन होता है, जो इस पूरी प्रक्रिया को नियंत्रित करता है। Three.js में, WebGLRenderer सबसे अधिक उपयोग किया जाने वाला रेंडरर है, जो उच्च-गुणवत्ता वाले 3D ग्राफिक्स को वास्तविक समय में रेंडर करने की अनुमति देता है।

WebGLRenderer का परिचय

WebGLRenderer, Three.js का मुख्य रेंडरर है, जो WebGL (Web Graphics Library) का उपयोग करता है। WebGL एक ब्राउज़र में ग्राफिक्स को रेंडर करने का API है, जो हार्डवेयर एक्सेलेरेशन का उपयोग करके उच्च प्रदर्शन और गुणवत्ता प्रदान करता है।

WebGLRenderer को सेटअप करना

एक साधारण WebGLRenderer को सेटअप करना और उसे 3D सीन रेंडर करने के लिए उपयोग करना बहुत आसान है। नीचे दिया गया उदाहरण WebGLRenderer को सेटअप करने और उपयोग करने का तरीका दिखाता है:

उदाहरण:

// सीन और कैमरा सेटअप
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// WebGLRenderer सेटअप
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

// रेंडरिंग फंक्शन
function animate() {
    requestAnimationFrame(animate);

    // क्यूब को घुमाएँ
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

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

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

WebGLRenderer की मुख्य विशेषताएँ

1. Size सेट करना:
   • renderer.setSize(window.innerWidth, window.innerHeight); का उपयोग करके आप रेंडरर की साइज को सेट कर सकते हैं, जिससे यह आपके ब्राउज़र विंडो के अनुसार सीन को रेंडर कर सके।
   • यह रेंडरर का आउटपुट पिक्सल्स में प्रदर्शित करता है।
2. Dom Element का उपयोग:
   • renderer.domElement का उपयोग करके आप रेंडरर को HTML के भीतर किसी भी स्थान पर जोड़ सकते हैं।
   • इसे आप <canvas> टैग के रूप में अपने पेज में जोड़ सकते हैं।
3. Anti-Aliasing:
   • WebGLRenderer में एंटी-अलियासिंग (Anti-Aliasing) का विकल्प भी है, जिससे रेंडरिंग अधिक स्मूद और पिक्सल-फ्री होती है।
   • Example: const renderer = new THREE.WebGLRenderer({ antialias: true });
4. Pixel Ratio:
   • renderer.setPixelRatio(window.devicePixelRatio); का उपयोग करके आप रेंडरर को हाई-डेफिनिशन डिवाइसेस के लिए अनुकूलित कर सकते हैं।
5. शैडो मैपिंग (Shadow Mapping):
   • WebGLRenderer शैडो मैपिंग को सपोर्ट करता है, जिससे 3D ऑब्जेक्ट्स पर अधिक वास्तविक शैडोज़ उत्पन्न होती हैं।
   • Example: renderer.shadowMap.enabled = true;

रेंडरिंग प्रक्रिया

रेंडरिंग प्रक्रिया में सीन, कैमरा, और लाइटिंग के आधार पर रेंडरर एक फ्रेम बनाता है, जिसे स्क्रीन पर प्रदर्शित किया जाता है। प्रत्येक फ्रेम के लिए, रेंडरर सीन में ऑब्जेक्ट्स को कैमरा के दृष्टिकोण से रेंडर करता है और उसे उपयोगकर्ता के स्क्रीन पर दिखाता है।

उदाहरण:

renderer.render(scene, camera); // सीन को कैमरा के दृष्टिकोण से रेंडर करना

एनीमेशन के लिए रेंडरिंग

Three.js में रेंडरिंग को निरंतर रूप से करने के लिए एक एनीमेशन लूप का उपयोग किया जाता है। यह लूप requestAnimationFrame का उपयोग करके हर फ्रेम को रेंडर करता है और आपके 3D सीन को जीवंत बनाता है।

उदाहरण:

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

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

रेस्पॉन्सिव रेंडरिंग (Responsive Rendering)

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

रेस्पॉन्सिव रेंडरिंग के लिए महत्वपूर्ण तत्व

1. Canvas Size को अपडेट करना:
   • जब भी विंडो का आकार बदले, तो आपको अपने रेंडरर की साइज को अपडेट करना होगा ताकि आपका 3D सीन सही ढंग से दिखाई दे।
   • यह resize इवेंट लिसनर के माध्यम से किया जाता है, जो विंडो के आकार बदलने पर ट्रिगर होता है।

उदाहरण:

window.addEventListener('resize', () => {
    // नई विंडो साइज के अनुसार रेंडरर को अपडेट करें
    renderer.setSize(window.innerWidth, window.innerHeight);

    // कैमरा का एस्पेक्ट रेश्यो अपडेट करें
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});

2. Aspect Ratio को बनाए रखना:
   • कैमरा का एस्पेक्ट रेश्यो (Aspect Ratio) बनाए रखना महत्वपूर्ण है, ताकि 3D सीन बिना किसी विकृति (distortion) के सही ढंग से प्रदर्शित हो।
   • हर बार विंडो के आकार में परिवर्तन होने पर कैमरा के एस्पेक्ट रेश्यो को अपडेट करना चाहिए।

उदाहरण:

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

3. Pixel Ratio का ध्यान रखना:
   • आधुनिक डिवाइसेस, जैसे कि रेटिना डिस्प्ले, उच्च पिक्सल डेंसिटी (Pixel Density) रखते हैं। window.devicePixelRatio का उपयोग करके आप यह सुनिश्चित कर सकते हैं कि आपका रेंडरर इन डिवाइसेस पर सही ढंग से रेंडर हो।
   • इससे आपकी 3D ग्राफिक्स की क्वालिटी उच्च पिक्सल डेंसिटी डिवाइसेस पर बेहतर दिखाई देगी।

उदाहरण:

renderer.setPixelRatio(window.devicePixelRatio);

4. CSS Styles का उपयोग:
   • आप अपने <canvas> एलिमेंट को CSS के माध्यम से भी स्टाइल कर सकते हैं, जिससे यह सुनिश्चित हो कि रेंडरर सभी स्क्रीन साइज पर सही ढंग से फिट हो।
   • यह आपकी 3D सीन को एक रेस्पॉन्सिव डिज़ाइन के तहत लाने में मदद करता है।

उदाहरण:

canvas {
    width: 100%;
    height: 100%;
    display: block;
}

5. अनुपात को बनाए रखना (Maintain Proportions):
   • कुछ स्थितियों में, आपको 3D ऑब्जेक्ट्स के अनुपात को बनाए रखना होगा ताकि वे सभी स्क्रीन पर समान दिखें। इसे कैमरा और रेंडरर दोनों के माध्यम से किया जा सकता है।

रेस्पॉन्सिव रेंडरिंग का उदाहरण

उदाहरण:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio); // पिक्सल रेश्यो सेट करें
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();

// विंडो रेसाइज़ इवेंट को हैंडल करना
window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});