Perspective এবং Orthographic Camera

Three.js এবং ক্যামেরার ভূমিকা

Three.js হল একটি JavaScript লাইব্রেরি যা আপনাকে ওয়েব ব্রাউজারে 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করতে সহায়তা করে। Three.js-এ ক্যামেরা হল সেই উপাদান যা দৃশ্য (scene) দেখানোর জন্য প্রয়োজন। ক্যামেরার মাধ্যমে আপনি গ্রাফিক্সের দৃশ্য (view) নিয়ন্ত্রণ করতে পারেন। Two প্রধান ধরনের ক্যামেরা ব্যবহৃত হয়:

1. Perspective Camera
2. Orthographic Camera

এই দুই ক্যামেরার মধ্যে পার্থক্য এবং তাদের ব্যবহারিক প্রয়োগ সম্পর্কে বিস্তারিত আলোচনা করা হবে।

১. Perspective Camera

Perspective Camera হল সবচেয়ে সাধারণ এবং প্রাকৃতিক ক্যামেরা যা 3D দৃশ্যে ব্যবহার করা হয়। এটি সেই ক্যামেরা যা আপনি বাস্তব জীবনে যে ক্যামেরার মতো দেখতে পান। এই ক্যামেরায়, বস্তুগুলি দূরে যত যাবে, তত ছোট দেখায়, যা আমাদের বাস্তব জগতের মতো। এর মধ্যে "ফোকাল লেংথ" বা "ভিউএং অ্যাঙ্গেল" থাকে, যা দৃশ্যের গভীরতা এবং বস্তুর আকার নির্ধারণ করে।

Perspective Camera এর সিনট্যাক্স:

const camera = new THREE.PerspectiveCamera(
  fov,       // ফিল্ড অফ ভিউ (Field of View)
  aspect,    // আসপেক্ট রেশিও (অধিকাংশ ক্ষেত্রে উইন্ডোর প্রস্থ / উচ্চতা)
  near,      // নিকটতম দৃশ্যের দূরত্ব
  far        // সর্বোচ্চ দৃশ্যের দূরত্ব
);

• fov: Field of View (ডিগ্রীতে), এটি ক্যামেরার ভিউ অ্যাঙ্গেল (মাঠের ক্ষেত্র) নির্ধারণ করে। সাধারণত 75-90 ডিগ্রি ব্যবহার করা হয়।
• aspect: এটি ক্যামেরার আসপেক্ট রেশিও, যা ক্যাভার উইন্ডোর প্রস্থ / উচ্চতা (width / height) নির্ধারণ করে।
• near: ক্যামেরার সামনে যে দূরত্বে বস্তু দেখা যাবে, এটি সেটি নির্ধারণ করে।
• far: ক্যামেরার পেছনে যে দূরত্ব পর্যন্ত বস্তু দেখা যাবে, এটি সেটি নির্ধারণ করে।

Perspective Camera উদাহরণ:

// Scene তৈরি করা
const scene = new THREE.Scene();

// Perspective camera তৈরি করা
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Renderer তৈরি করা
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Cube তৈরি করা
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// ক্যামেরা পজিশন সেট করা
camera.position.z = 5;

// Render ফাংশন
function animate() {
  requestAnimationFrame(animate);

  // Cube এর রোটেশন
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // Render করা
  renderer.render(scene, camera);
}

animate();

এখানে, PerspectiveCamera ব্যবহার করা হয়েছে এবং ক্যামেরার সাথে 3D বক্স (cube) প্রদর্শন করা হয়েছে।

২. Orthographic Camera

Orthographic Camera হল একটি বিশেষ ধরনের ক্যামেরা যা দূরের বস্তু এবং কাছের বস্তু একই আকারের দেখায়, অর্থাৎ এটি 3D দৃশ্যে কোন পার্সপেকটিভ প্রভাব তৈরি করে না। এই ক্যামেরা ব্যবহার করার সময়, দৃশ্যের মধ্যে কোনো গভীরতা (depth) থাকে না। এটি সাধারণত টেকনিক্যাল ড্রইং, সাইনস, অথবা 2D/3D গেমসে ব্যবহৃত হয় যেখানে গভীরতার প্রভাব প্রয়োজন হয় না।

Orthographic Camera এর সিনট্যাক্স:

const camera = new THREE.OrthographicCamera(
  left,   // বাম সীমা
  right,  // ডান সীমা
  top,    // উপরের সীমা
  bottom, // নিচের সীমা
  near,   // নিকটতম দৃশ্যের দূরত্ব
  far     // সর্বোচ্চ দৃশ্যের দূরত্ব
);

• left, right, top, bottom: ক্যামেরার ভিউবক্সের সীমানা। এটি দৃশ্যের পরিধি নির্ধারণ করে।
• near, far: ক্যামেরার সামনে এবং পেছনে যে সীমা পর্যন্ত বস্তু দেখা যাবে, তা নির্ধারণ করে।

Orthographic Camera উদাহরণ:

// Scene তৈরি করা
const scene = new THREE.Scene();

// Orthographic camera তৈরি করা
const camera = new THREE.OrthographicCamera(
  -window.innerWidth / 2, window.innerWidth / 2,
  window.innerHeight / 2, -window.innerHeight / 2,
  1, 1000
);

// Renderer তৈরি করা
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Cube তৈরি করা
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// ক্যামেরা পজিশন সেট করা
camera.position.z = 5;

// Render ফাংশন
function animate() {
  requestAnimationFrame(animate);

  // Cube এর রোটেশন
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // Render করা
  renderer.render(scene, camera);
}

animate();

এখানে, OrthographicCamera ব্যবহার করা হয়েছে এবং একই 3D বক্স (cube) প্রদর্শন করা হয়েছে, তবে এখানে কোনো পার্সপেকটিভ প্রভাব নেই, এবং Cube-এর আকার একরকম দেখাচ্ছে।

Perspective vs Orthographic Camera

সারাংশ

Perspective Camera হল বাস্তবিক 3D দৃশ্যের জন্য এবং Orthographic Camera হল 2D দৃশ্য এবং টেকনিক্যাল ড্রইংয়ের জন্য উপযুক্ত। Perspective Camera দূরের বস্তু ছোট এবং কাছের বস্তু বড় দেখায়, যা বাস্তব জীবনের ক্যামেরা প্রভাবের মতো। অন্যদিকে, Orthographic Camera তে কোনো গভীরতার প্রভাব থাকে না, যা সরল বা সমতল দৃশ্য তৈরি করতে সহায়ক। Three.js-এ এই দুই ক্যামেরার ব্যবহার আপনার প্রকল্পের প্রয়োজন অনুযায়ী নির্বাচিত করা যেতে পারে।