Keyframe Animations এবং Animation Mixer

Three.js এবং Animation

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

Keyframe Animation এবং Animation Mixer দুটি গুরুত্বপূর্ণ কৌশল যা Three.js-এ অ্যানিমেশন তৈরি এবং পরিচালনার জন্য ব্যবহৃত হয়।

1. Keyframe Animation

Keyframe Animation হল একটি অ্যানিমেশন কৌশল যেখানে অ্যানিমেশনকে মূল "কী-ফ্রেম" দিয়ে ডিফাইন করা হয়, এবং অন্যান্য ফ্রেমগুলো সেই কী-ফ্রেমগুলির মধ্যে স্থানান্তরিত হয়। এটি ব্যবহার করে আপনি একটি অবজেক্টের অবস্থান, স্কেল, রোটেশন ইত্যাদি পরিবর্তন করতে পারেন।

Three.js-এ, KeyframeAnimation তৈরি করতে, আপনাকে প্রথমে একটি KeyframeTrack তৈরি করতে হয়, যা বিশেষ করে বিভিন্ন প্রপার্টির অ্যানিমেশন তৈরি করে (যেমন পজিশন, রোটেশন, স্কেল ইত্যাদি)। এর পরে, AnimationClip তৈরি করতে হয়, যা একাধিক KeyframeTrack একত্রিত করে অ্যানিমেশন তৈরি করে।

Keyframe Animation উদাহরণ:

// Scene এবং Renderer সেটআপ
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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 পজিশন সেট করা
camera.position.z = 5;

// Keyframe Animation তৈরি করা
const keyframes = [
  new THREE.VectorKeyframeTrack(
    '.position', // property (position) for the object
    [0, 2, 4],  // times
    [0, 0, 0, 2, 2, 2, 0, 0, 5] // values (x, y, z for each keyframe)
  ),
];

// AnimationClip তৈরি করা
const clip = new THREE.AnimationClip('move', -1, keyframes);

// AnimationMixer তৈরি করা
const mixer = new THREE.AnimationMixer(cube);
mixer.clipAction(clip).play();

// Animation Loop
function animate() {
  requestAnimationFrame(animate);
  mixer.update(0.01);
  renderer.render(scene, camera);
}

animate();

এখানে, একটি Cube তৈরি করা হয়েছে এবং তার পজিশনকে Keyframe Animation এর মাধ্যমে 3D স্পেসে পরিবর্তন করা হচ্ছে। AnimationMixer ব্যবহৃত হয়েছে যাতে অ্যানিমেশনটি প্লে এবং আপডেট হয়।

2. Animation Mixer

Animation Mixer হলো Three.js-এ একটি বিশেষ অবজেক্ট যা এক বা একাধিক অ্যানিমেশন ক্লিপকে একসাথে প্লে এবং মিক্স করার জন্য ব্যবহৃত হয়। এটি অ্যানিমেশন রেকর্ডিং, কন্ট্রোল, এবং সংশ্লিষ্ট অ্যানিমেশন ট্র্যাকগুলি পরিচালনা করে।

এটি একাধিক অ্যানিমেশন ক্লিপ নিয়ে কাজ করতে সক্ষম এবং আপনাকে একই সময়ে বিভিন্ন অ্যানিমেশন একসাথে চালানোর সুবিধা দেয়, যেমন একটি অবজেক্টের পজিশন পরিবর্তন হতে পারে যখন অন্যটি স্কেল বা রোটেট হচ্ছে।

Animation Mixer উদাহরণ:

// Scene এবং Renderer সেটআপ
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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 পজিশন সেট করা
camera.position.z = 5;

// প্রথম Keyframe Animation তৈরি করা (Cube এর পজিশন)
const positionKeyframes = [
  new THREE.VectorKeyframeTrack(
    '.position',
    [0, 2, 4],
    [0, 0, 0, 2, 2, 2, 0, 0, 5]
  ),
];

// দ্বিতীয় Keyframe Animation তৈরি করা (Cube এর রোটেশন)
const rotationKeyframes = [
  new THREE.VectorKeyframeTrack(
    '.rotation',
    [0, 2, 4],
    [0, 0, 0, Math.PI, Math.PI, Math.PI, Math.PI * 2, Math.PI * 2, Math.PI * 2]
  ),
];

// দুইটি ক্লিপ তৈরি করা
const positionClip = new THREE.AnimationClip('move', -1, positionKeyframes);
const rotationClip = new THREE.AnimationClip('rotate', -1, rotationKeyframes);

// AnimationMixer তৈরি করা
const mixer = new THREE.AnimationMixer(cube);
mixer.clipAction(positionClip).play();
mixer.clipAction(rotationClip).play();

// Animation Loop
function animate() {
  requestAnimationFrame(animate);
  mixer.update(0.01); // অ্যানিমেশন আপডেট করা
  renderer.render(scene, camera);
}

animate();

এখানে, Animation Mixer দুইটি আলাদা অ্যানিমেশন ক্লিপ (move এবং rotate) একসাথে চালাচ্ছে। Cube অবজেক্টের পজিশন এবং রোটেশন একই সময়ে পরিবর্তিত হচ্ছে।

Keyframe Animation এবং Animation Mixer এর সুবিধা

1. Multiple Animations: একাধিক অ্যানিমেশন একসাথে চালানো যায়। এটি বিশেষভাবে দরকারী যখন একই অবজেক্টের বিভিন্ন প্রপার্টি (যেমন পজিশন, রোটেশন, স্কেল) একসাথে অ্যানিমেট করতে হয়।
2. ডেটা ড্রিভেন অ্যানিমেশন: আপনি JSON ফাইল বা অন্যান্য ডেটা উৎস থেকে অ্যানিমেশন ডেটা লোড করতে পারেন এবং কাস্টম অ্যানিমেশন ট্র্যাক তৈরি করতে পারেন।
3. Control Over Animation: AnimationMixer আপনাকে অ্যানিমেশন থামানো, চালানো, গতির পরিবর্তন বা একটি বিশেষ ফ্রেমে পৌঁছানোর মতো কন্ট্রোল দেয়।
4. Easy Integration: Keyframe Animation এবং Animation Mixer আপনাকে বিভিন্ন ধরণের অ্যানিমেশন তৈরির জন্য সুবিধা দেয়, যা ডেভেলপারদের আরও বৈচিত্র্যময় এবং ইন্টারঅ্যাকটিভ 3D অভিজ্ঞতা তৈরি করতে সহায়তা করে।

সারাংশ

Keyframe Animation এবং Animation Mixer হল Three.js এর অ্যানিমেশন কৌশল যা আপনাকে 3D অবজেক্টগুলির পজিশন, রোটেশন, স্কেল ইত্যাদি প্রপার্টি অ্যানিমেট করার জন্য শক্তিশালী এবং কার্যকরী টুলস সরবরাহ করে। Keyframe Animation ব্যবহার করে আপনি সুনির্দিষ্ট সময়ের পয়েন্টে অবজেক্টের অবস্থান নির্ধারণ করতে পারেন, এবং Animation Mixer এর মাধ্যমে একাধিক অ্যানিমেশন একসাথে চালানো সম্ভব হয়। এই দুটি কৌশল মিলিয়ে, Three.js-এ আরও সমৃদ্ধ এবং জটিল অ্যানিমেশন তৈরি করা যায়, যা ওয়েব ডেভেলপমেন্টে অত্যন্ত কার্যকরী।