Camera এর প্রকারভেদ এবং নিয়ন্ত্রণ

Three.js কি?

Three.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব ব্রাউজারে থ্রিডি গ্রাফিক্স তৈরি এবং প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে, যা একটি কম্পিউটার গ্রাফিক্স API যা ব্রাউজারকে থ্রিডি গ্রাফিক্স রেন্ডারিং করতে সক্ষম করে। Three.js ব্যবহার করে আপনি ওয়েব অ্যাপ্লিকেশনগুলিতে থ্রিডি মডেল, এনিমেশন, লাইটিং, এবং ক্যামেরা নিয়ন্ত্রণ সহজেই তৈরি করতে পারেন।

ক্যামেরা (Camera) এর ভূমিকা

Camera হল Three.js এর একটি মৌলিক উপাদান যা দৃশ্যের (scene) ভিতর থেকে দৃশ্যমান অবজেক্টগুলির দৃশ্যমানতা নির্ধারণ করে। এটি ওয়েব ব্রাউজারে থ্রিডি পরিবেশে কীভাবে দৃশ্য প্রদর্শিত হবে তা নিয়ন্ত্রণ করে। ক্যামেরার অবস্থান, দৃষ্টি কোণ এবং অন্যান্য প্যারামিটারস দৃশ্যের বাস্তবতাকে প্রভাবিত করে।

Three.js এ বিভিন্ন ধরনের ক্যামেরা ব্যবহার করা হয়, এবং তাদের মধ্যে প্রতিটি নির্দিষ্ট পরিস্থিতির জন্য উপযুক্ত। ক্যামেরার মূল কাজ হল 3D অবজেক্টগুলির মধ্যে থেকে দৃশ্যমানতার জন্য কোন পর্দায় কিভাবে প্রক্ষেপণ হবে তা নির্ধারণ করা।

Three.js এ ক্যামেরার প্রকারভেদ

Three.js-এ দুই ধরনের প্রধান ক্যামেরা রয়েছে:

1. PerspectiveCamera
2. OrthographicCamera

১. PerspectiveCamera

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

PerspectiveCamera এর প্যারামিটারস:

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

PerspectiveCamera উদাহরণ:

const camera = new THREE.PerspectiveCamera(
  75, // Field of View
  window.innerWidth / window.innerHeight, // Aspect ratio
  0.1, // Near clipping plane
  1000 // Far clipping plane
);
camera.position.z = 5; // ক্যামেরার অবস্থান

এই ক্যামেরায়, আপনি একটি 3D দৃশ্যের ভিতর থেকে দূরত্ব এবং গভীরতা অনুভব করবেন, এবং আপনার দৃশ্যের মধ্যে পিপিং ফিল্ড (focal point) ঠিক করা সম্ভব হবে।

২. OrthographicCamera

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

OrthographicCamera এর প্যারামিটারস:

• left, right, top, bottom: ক্যামেরার দৃশ্যের সীমা। এটি দৃশ্যের কোন কোণ এবং আকার নির্ধারণ করে।
• near: ক্যামেরার কাছের দৃশ্য সীমা।
• far: ক্যামেরার দূরের দৃশ্য সীমা।

OrthographicCamera উদাহরণ:

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; // ক্যামেরার অবস্থান

এখানে OrthographicCamera এর মাধ্যমে 2D দৃশ্য বা চিত্র তৈরি করা হবে, যেখানে গভীরতা অনুভূতি (perspective effect) থাকবে না এবং সব কিছু একরকম আকারে দেখাবে।

ক্যামেরা নিয়ন্ত্রণ

Three.js-এ ক্যামেরার নিয়ন্ত্রণ করতে OrbitControls.js নামে একটি এক্সটেনশন লাইব্রেরি রয়েছে, যা ব্যবহারকারীকে দৃশ্যের উপর মাউস দিয়ে ক্যামেরা ঘোরাতে, প্যান করতে এবং জুম করতে সক্ষম করে।

OrbitControls উদাহরণ:

import { OrbitControls } from 'three/examples/js/controls/OrbitControls';

// ক্যামেরা এবং রেন্ডারার ইন্সট্যান্স তৈরি করা
const controls = new OrbitControls(camera, renderer.domElement);

// ক্যামেরার নিয়ন্ত্রণ কাস্টমাইজ করা
controls.enableDamping = true; // ড্যাম্পিং সক্রিয় করা
controls.dampingFactor = 0.25; // ড্যাম্পিং ফ্যাক্টর
controls.screenSpacePanning = false; // স্ক্রীন স্পেস প্যানিং নিষ্ক্রিয় করা
controls.maxPolarAngle = Math.PI / 2; // সর্বোচ্চ পোলার অ্যাঙ্গেল

OrbitControls এর মাধ্যমে, ব্যবহারকারী মাউস দিয়ে ক্যামেরা ঘোরাতে, প্যান করতে এবং জুম ইন/আউট করতে সক্ষম হবে।

সারাংশ

Three.js এ ক্যামেরা ব্যবহার করা খুবই গুরুত্বপূর্ণ, কারণ এটি 3D দৃশ্যে ভিউ এবং প্রক্ষেপণ পরিচালনা করে। PerspectiveCamera বাস্তব দুনিয়ার মতো দৃশ্য তৈরি করতে সাহায্য করে, যেখানে OrthographicCamera সমান আকৃতির 2D দৃশ্য তৈরি করতে ব্যবহৃত হয়। ক্যামেরার অবস্থান, দৃষ্টিকোণ এবং নিয়ন্ত্রণের মাধ্যমে আপনি Three.js এ আপনার 3D দৃশ্যকে বাস্তবসম্মত এবং ইন্টারঅ্যাকটিভ করতে পারবেন। OrbitControls.js ব্যবহারের মাধ্যমে ব্যবহারকারীকে ক্যামেরা নিয়ন্ত্রণের সুবিধা দেওয়া যায়।

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-এ এই দুই ক্যামেরার ব্যবহার আপনার প্রকল্পের প্রয়োজন অনুযায়ী নির্বাচিত করা যেতে পারে।

Three.js এবং ক্যামেরা কন্ট্রোলস

Three.js হল একটি 3D গ্রাফিক্স লাইব্রেরি যা JavaScript দিয়ে ওয়েব ব্রাউজারে 3D গ্রাফিক্স রেন্ডার করতে সহায়তা করে। এটি WebGL এর উপরে কাজ করে এবং 3D মডেল, সীন, এবং ক্যামেরার সাথে ইন্টারঅ্যাকশন পরিচালনা করতে সহায়ক টুলস প্রদান করে।

Camera Controls হল Three.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারীদের সীন এবং 3D অবজেক্টের চারপাশে ক্যামেরা ঘোরানোর, জুম ইন এবং আউট করার মতো সুবিধা দেয়। OrbitControls এবং TrackballControls হল দুটি জনপ্রিয় ক্যামেরা কন্ট্রোল যা আপনাকে থ্রি.জেএস-এ ক্যামেরা পরিচালনার জন্য সহায়তা করবে।

১. OrbitControls

OrbitControls একটি Three.js প্লাগইন যা ক্যামেরাকে একটি নির্দিষ্ট পিভট পয়েন্টের চারপাশে ঘোরানোর সুবিধা দেয়। এটি সাধারণত ওয়েব 3D অ্যাপ্লিকেশন এবং গেমের মধ্যে ক্যামেরা কন্ট্রোলের জন্য ব্যবহৃত হয়। OrbitControls ব্যবহারকারীকে 3D দৃশ্যের চারপাশে ক্যামেরাকে ঘোরাতে, প্যান করতে এবং জুম করতে দেয়। এটি অনেকটা গুগল ম্যাপস বা অন্যান্য 3D ভিউ অ্যাপ্লিকেশনগুলির মতো কাজ করে।

OrbitControls ব্যবহার করার জন্য পদক্ষেপ:

1. প্রথমে Three.js এর সাথে OrbitControls.js স্ক্রিপ্ট ইনক্লুড করুন। এটি Three.js এর সাথে অন্তর্ভুক্ত থাকে তবে এটি আলাদা করে ইনস্টল বা আমদানি করতে হতে পারে।
2. OrbitControls ক্লাসটি Three.js-এ ক্যামেরা কন্ট্রোলের জন্য ব্যবহার করুন।

উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OrbitControls Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

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

        camera.position.z = 5;

        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        var animate = function () {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>
</html>

এখানে, OrbitControls ব্যবহার করে আমরা একটি ক্যামেরা সেটআপ করেছি যা ব্যবহারকারীকে cube এর চারপাশে ঘোরানোর সুবিধা দেবে।

২. TrackballControls

TrackballControls হল একটি ক্যামেরা কন্ট্রোল যা OrbitControls এর মতোই কিন্তু এটি আরও ফ্লুইড এবং সোজা লাইন থেকে দূরে ক্যামেরা ঘোরাতে সহায়তা করে। এটি Trackball (মাউসের ট্র্যাকে) ভিত্তিক, যেখানে ব্যবহারকারী ক্যামেরা ঘোরানোর জন্য মাউসের ড্র্যাগ ব্যবহার করতে পারে। এটি সহজেই 3D অবজেক্টের সাথে গভীর ইন্টারঅ্যাকশন তৈরি করে এবং এটি সাধারণত 3D CAD এবং গেম ডেভেলপমেন্ট-এ ব্যবহৃত হয়।

TrackballControls ব্যবহার করার জন্য পদক্ষেপ:

1. Three.js এ TrackballControls.js স্ক্রিপ্ট ইনক্লুড করুন।
2. TrackballControls ক্লাস ব্যবহার করুন ক্যামেরা কন্ট্রোলের জন্য।

উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrackballControls Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/TrackballControls.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.SphereGeometry(1, 32, 32);
        var material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
        var sphere = new THREE.Mesh(geometry, material);
        scene.add(sphere);

        camera.position.z = 5;

        var controls = new THREE.TrackballControls(camera, renderer.domElement);

        var animate = function () {
            requestAnimationFrame(animate);
            controls.update(); // Only required if controls.enableDamping = true, or if controls.auto-rotation is enabled
            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>
</html>

এখানে, TrackballControls ব্যবহার করে আমরা একটি sphere 3D অবজেক্টে ক্যামেরা কন্ট্রোল প্রয়োগ করেছি যা ব্যবহারকারীদের ঘোরানোর জন্য মাউস ড্র্যাগ করার সুযোগ দেয়।

OrbitControls vs TrackballControls

সারাংশ

Three.js-এ Camera Controls ব্যবহার করে আপনি 3D দৃশ্যের উপর ইন্টারঅ্যাকশন করতে পারবেন। OrbitControls এবং TrackballControls হল দুইটি জনপ্রিয় ক্যামেরা কন্ট্রোল, যেখানে OrbitControls সাধারণত 3D দৃশ্যের উপর ঘোরানোর জন্য ব্যবহৃত হয় এবং TrackballControls ব্যবহারকারীদের আরো ফ্লুইডভাবে ঘোরাতে এবং নিয়ন্ত্রণ করতে সাহায্য করে। আপনি আপনার 3D অ্যাপ্লিকেশন এবং দৃশ্যের প্রয়োজন অনুসারে এই কন্ট্রোলগুলো বেছে নিতে পারেন।

Three.js কি?

Three.js একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা ওয়েব ব্রাউজারে ৩ডি গ্রাফিক্স এবং এনিমেশন তৈরি করার জন্য ব্যবহৃত হয়। এটি WebGL এর উপরে তৈরি এবং ডেভেলপারদের জটিল ৩ডি গ্রাফিক্স এবং এনিমেশন তৈরি করতে সহজ করে তোলে। Three.js এর মাধ্যমে আপনি ক্যামেরা, লাইট, মডেল, টেক্সচার, এবং এনিমেশনসহ উন্নত ৩ডি দৃশ্য তৈরি করতে পারবেন।

এই গাইডে, আমরা Camera Movement এবং Animation এর জন্য Three.js ব্যবহার করার পদ্ধতি আলোচনা করব।

১. Camera Movement

থ্রি.জেএস এ ক্যামেরা এমন একটি অঙ্গ যা দৃশ্যের পেপার বা ভিউপোর্টের দৃষ্টিকোণ নিয়ন্ত্রণ করে। ক্যামেরা চলাচল ৩ডি দৃশ্যে বিভিন্ন কোণ এবং দিক থেকে দৃশ্য দেখানোর জন্য গুরুত্বপূর্ণ।

Three.js এ ক্যামেরার জন্য বেশ কিছু অপশন রয়েছে যেমন PerspectiveCamera এবং OrthographicCamera। সাধারণত PerspectiveCamera ব্যবহার করা হয়, যা ৩ডি দৃশ্যের মধ্যে গভীরতা এবং পরিসীমা অনুভূতি সৃষ্টি করে।

PerspectiveCamera এর মাধ্যমে ক্যামেরা তৈরি করা:

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

// ক্যামেরা স্থান নির্ধারণ
camera.position.z = 5;

এখানে, 75 হল ফিল্ড অব ভিউ (Field of View), window.innerWidth / window.innerHeight হল অ্যাসপেক্ট রেশিও এবং 0.1 এবং 1000 হল নিকটতম এবং দূরবর্তী কাটা (clipping planes)।

ক্যামেরা মুভমেন্ট এনিমেশন:

// অ্যানিমেশন লুপ
function animate() {
  requestAnimationFrame(animate);

  // ক্যামেরা ঘোরানো
  camera.rotation.x += 0.01;
  camera.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

এখানে ক্যামেরাকে প্রতি ফ্রেমে x এবং y অক্ষের চারপাশে ঘোরানো হচ্ছে।

ক্যামেরা প্যান এবং জুম:

Three.js এ ক্যামেরা প্যান বা জুম করার জন্য, camera.position এর মান পরিবর্তন করা যায়। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে mouse movement এর মাধ্যমে ক্যামেরা প্যান করা হবে:

let mouseX = 0;
let mouseY = 0;

window.addEventListener('mousemove', (event) => {
  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
});

function animate() {
  requestAnimationFrame(animate);

  // ক্যামেরা প্যান
  camera.position.x += (mouseX * 5 - camera.position.x) * 0.05;
  camera.position.y += (-mouseY * 5 - camera.position.y) * 0.05;

  renderer.render(scene, camera);
}

animate();

এখানে, মাউসের চলাচলের উপর ভিত্তি করে ক্যামেরার পজিশন পরিবর্তিত হচ্ছে।

২. Animation

৩ডি এনিমেশন তৈরি করার জন্য Three.js এ একাধিক পদ্ধতি রয়েছে। এখানে আমরা Object Animation এবং Camera Animation নিয়ে আলোচনা করব।

Object Animation:

Three.js এ Object Animation তৈরি করতে AnimationMixer ব্যবহার করা হয়, যা নির্দিষ্ট অবজেক্টের মুভমেন্ট বা অন্যান্য পরিবর্তন পরিচালনা করতে সহায়তা করে। এটি সাধারণত ৩ডি অবজেক্টের geometry বা material এর প্রপার্টির পরিবর্তনের জন্য ব্যবহৃত হয়।

AnimationMixer ব্যবহার:

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// AnimationMixer তৈরি
const mixer = new THREE.AnimationMixer(cube);

// একটি সাধারণ এনিমেশন তৈরি
const clip = new THREE.AnimationClip("rotate", -1, [
  new THREE.KeyframeTrack(
    ".rotation[y]",
    [0, 1, 2],
    [0, Math.PI, Math.PI * 2]
  )
]);

mixer.clipAction(clip).play();

এখানে, AnimationClip ব্যবহার করা হয়েছে একটি অবজেক্টের rotation অক্ষের চারপাশে ঘোরানোর জন্য। KeyframeTrack দিয়ে এনিমেশনটির শুরু এবং শেষ অবস্থান নির্ধারণ করা হয়েছে।

এনিমেশন লুপ:

function animate() {
  requestAnimationFrame(animate);

  // AnimationMixer আপডেট
  mixer.update(0.01);

  renderer.render(scene, camera);
}

animate();

এখানে mixer.update() ব্যবহার করা হচ্ছে এনিমেশন ফ্রেম আপডেট করার জন্য। প্রতি ফ্রেমে এনিমেশন আপডেট হচ্ছে।

৩. Complex Animations using Tween.js

যদি আপনি আরও জটিল এনিমেশন তৈরি করতে চান, তবে Tween.js লাইব্রেরি ব্যবহার করা যেতে পারে, যা ক্যামেরা বা অবজেক্টের সিলিপ্টেড মুভমেন্ট এনিমেশন তৈরি করতে সাহায্য করে।

Tween.js ব্যবহার:

import TWEEN from '@tweenjs/tween.js';

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const target = new THREE.Vector3(2, 2, 2); // টার্গেট পজিশন

const tween = new TWEEN.Tween(cube.position)
  .to(target, 2000) // টার্গেট পজিশনে যেতে ২ সেকেন্ড সময় নেবে
  .easing(TWEEN.Easing.Quadratic.Out) // easing ফাংশন ব্যবহার
  .start();

function animate() {
  requestAnimationFrame(animate);

  TWEEN.update(); // এনিমেশন আপডেট

  renderer.render(scene, camera);
}

animate();

এখানে, Tween.js ব্যবহার করা হয়েছে cube অবজেক্টকে একটি নির্দিষ্ট পজিশনে স্থানান্তর করতে। এটি সফট মুভমেন্টের জন্য খুবই উপকারী।

সারাংশ

Camera Movement এবং Animation থ্রি.জেএস এ খুবই গুরুত্বপূর্ণ অংশ, যা ৩ডি দৃশ্যে গতিশীলতা এবং ইন্টারঅ্যাকশন যোগ করে। Camera Movement এর মাধ্যমে আপনি দৃশ্যের দৃষ্টিকোণ এবং কিভাবে এটি বিভিন্ন অক্ষের উপর মুভ করবে তা নিয়ন্ত্রণ করতে পারেন। Animation দিয়ে আপনি ৩ডি অবজেক্টের গতিবিধি, আকৃতি পরিবর্তন, এবং অন্যান্য বৈশিষ্ট্য নিয়ন্ত্রণ করতে পারেন। Tween.js বা AnimationMixer এর মাধ্যমে আপনি আরও জটিল এবং সূক্ষ্ম এনিমেশন তৈরি করতে পারেন।

Three.js এবং 3D গ্রাফিক্স

Three.js হল একটি শক্তিশালী JavaScript লাইব্রেরি যা ওয়েব ব্রাউজারে 3D গ্রাফিক্স তৈরির জন্য ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে এবং জটিল 3D দৃশ্য তৈরি করা, সিমুলেশন করা এবং অ্যানিমেশন তৈরি করতে সাহায্য করে। Three.js এর মাধ্যমে আপনি ওয়েবসাইটে 3D কনটেন্ট প্রদর্শন করতে পারেন এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাকটিভ 3D অভিজ্ঞতা তৈরি করতে পারেন।

View Frustum এবং Clipping Planes এর ধারণা

View Frustum এবং Clipping Planes হল 3D গ্রাফিক্সের মৌলিক ধারণা, যা তিনটি উপাদান নিয়ে কাজ করে:

• Frustum: এটি দৃশ্যমান ক্ষেত্র বা দৃশ্যের সীমা, যা ক্যামেরা এর মাধ্যমে দৃশ্য দেখানো হয়। ক্যামেরা কিছু নির্দিষ্ট দূরত্বের মধ্যে দৃশ্যমান বস্তুগুলো দেখাতে সক্ষম। যেগুলি এর বাইরে, সেগুলি অদৃশ্য হয়ে যায়।
• Clipping Planes: এই প্লেনগুলি ব্যবহার করে ক্যামেরার সামনে এবং পিছনে থাকা অবজেক্টগুলো ক্লিপ করা হয় (অর্থাৎ, দৃশ্যের বাইরে রেখে দেয়া হয়), যাতে অবজেক্টগুলো ক্যামেরার ভিউ ফ্রাস্টামের মধ্যে রাখা যায়।

১. View Frustum

View Frustum হল একটি কনজেক্স পিরামিড বা কনিক্যাল শেপ যা ক্যামেরার দৃশ্যমান এলাকা নির্ধারণ করে। এটি ক্যামেরা এবং এর দৃষ্টিভঙ্গি (field of view) এর সীমা গুলি দ্বারা নির্ধারিত হয়।

Three.js-এ, ক্যামেরা তৈরি করার সময় আপনি frustum এর বৈশিষ্ট্য সেট করতে পারেন। ক্যামেরার ফোকাল পয়েন্ট, ফিল্ড অফ ভিউ, প্রজেকশন প্লেনস ইত্যাদি এর মধ্যে পড়বে। ক্যামেরার জন্য সাধারণত দুটি ধরনের প্রজেকশন ব্যবহার করা হয়:

• Perspective Camera: এটি দূরত্বের সাথে বস্তুগুলির আকার পরিবর্তন করে এবং বাস্তবিক অনুভূতি প্রদান করে।
• Orthographic Camera: এটি বস্তুর আকার পরিবর্তন না করে সরাসরি দৃশ্য দেখায়।

Perspective Camera উদাহরণ:

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);

এখানে, camera হল একটি PerspectiveCamera যা 3D দৃশ্যের view frustum তৈরি করে। 0.1 এবং 1000 হল ক্যামেরার ক্লিপিং প্লেন, যেগুলি দূরত্বের মধ্যে অবজেক্টগুলোকে দৃশ্যমান করতে ব্যবহৃত হয়।

২. Clipping Planes

Clipping Planes হল কৌশল যার মাধ্যমে আমরা একটি দৃশ্যের নির্দিষ্ট অংশ বা অঞ্চলের বাইরে থাকা অবজেক্টগুলিকে সরিয়ে ফেলতে পারি। Three.js-এ আপনি near এবং far ক্লিপিং প্লেন ব্যবহার করতে পারেন যা ক্যামেরার দৃশ্যের সীমানা নির্ধারণ করে এবং দৃশ্যের বাইরে অবজেক্টগুলোকে অদৃশ্য করে দেয়।

Clipping Planes ব্যবহারের মাধ্যমে আপনি ক্যামেরার সামনে এবং পিছনে অবজেক্টগুলোর মধ্যে কোনগুলি দৃশ্যমান হবে তা নিয়ন্ত্রণ করতে পারেন।

Three.js-এ ক্লিপিং প্লেন ব্যবহার করার জন্য near এবং far ভ্যালু সহ ক্যামেরার ক্লিপিং প্লেন সেট করতে পারেন। near হল ক্যামেরার সামনে থাকা ক্লিপিং প্লেন এবং far হল ক্যামেরার পিছনে থাকা ক্লিপিং প্লেন।

ক্লিপিং প্লেন উদাহরণ:

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

// Set the near and far clipping planes
camera.near = 1;  // Objects closer than this distance will be clipped
camera.far = 500; // Objects farther than this distance will be clipped

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

এখানে, near এবং far ক্লিপিং প্লেন ব্যবহার করে আপনি ক্যামেরার দৃশ্যের সীমা নির্ধারণ করেছেন। ক্যামেরার সামনে খুব কাছাকাছি অবজেক্টগুলো এবং ক্যামেরার পেছনে যেসব অবজেক্ট আছে সেগুলো দৃশ্য থেকে বাদ দেওয়া হবে।

Custom Clipping Planes:

Three.js-এ আপনি Custom Clipping Planes ব্যবহার করে আরও জটিল ক্লিপিং কার্যক্রম করতে পারেন।

const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0);
const planes = [plane];
scene.clippingPlanes = planes;
scene.localClippingEnabled = true;

এখানে, THREE.Plane ব্যবহার করে একটি কাস্টম ক্লিপিং প্লেন তৈরি করা হয়েছে এবং এটি scene.clippingPlanes এ সেট করা হয়েছে। আপনি এর মাধ্যমে নির্দিষ্ট প্লেনের উপর ভিত্তি করে কিছু অংশ ক্লিপ করতে পারবেন।

Frustum Culling:

Frustum Culling হল একটি প্রক্রিয়া যা এক্সিকিউটিং কোডের গতি বাড়ানোর জন্য ব্যবহার করা হয়। এটি একটি টেকনিক্যাল পদ্ধতি যা অপ্রয়োজনীয় বা দৃশ্যের বাইরে থাকা অবজেক্টগুলোকে রেন্ডার করতে বাধা দেয়। Three.js এটি স্বয়ংক্রিয়ভাবে পরিচালনা করে। অর্থাৎ, যখন কোনো অবজেক্ট ক্যামেরার ভিউ ফ্রাস্টাম (view frustum) এর বাইরে চলে যায়, তখন Three.js ঐ অবজেক্টটিকে রেন্ডার করার প্রয়োজন মনে করে না এবং সে অবজেক্টটি গুলি বাদ দিয়ে রেন্ডারিং করতে থাকে।

সারাংশ

View Frustum এবং Clipping Planes হল 3D গ্রাফিক্সের গুরুত্বপূর্ণ ধারণা যা ক্যামেরার দৃশ্য এবং দৃশ্যের বাইরে থাকা অবজেক্টগুলোকে কনট্রোল করতে ব্যবহৃত হয়। View Frustum ক্যামেরার দৃশ্যের সীমা নির্ধারণ করে এবং Clipping Planes ক্যামেরার সামনে এবং পেছনে অবজেক্টগুলোকে ক্লিপ করে ফেলতে সহায়তা করে। Three.js-এ এই দুটি ধারণা ব্যবহার করে আপনি কাস্টম দৃশ্য তৈরি করতে পারেন এবং কার্যকরীভাবে ডেটা রেন্ডারিং অপটিমাইজ করতে পারেন। Frustum Culling স্বয়ংক্রিয়ভাবে দৃশ্যের বাইরে থাকা অবজেক্টগুলো বাদ দিয়ে পারফরম্যান্স উন্নত করে।