Camera Movement এবং Animation

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 এর মাধ্যমে আপনি আরও জটিল এবং সূক্ষ্ম এনিমেশন তৈরি করতে পারেন।