Animations এবং Movement

Three.js এবং 3D অ্যানিমেশন

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

Three.js-এ অ্যানিমেশন এবং মুভমেন্ট তৈরি করার মাধ্যমে আপনি 3D সিনে আরও প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ ফিল এনে দিতে পারেন। এই গাইডে আমরা দেখব কীভাবে Three.js ব্যবহার করে অ্যানিমেশন এবং মুভমেন্ট তৈরি করতে হয়।

১. Basic Animations in Three.js

Three.js এ অ্যানিমেশন সাধারণত requestAnimationFrame() এর সাথে ব্যবহার করে করা হয়। এর মাধ্যমে, আপনি প্রতিটি ফ্রেমে 3D অবজেক্ট বা ক্যামেরার অবস্থান পরিবর্তন করতে পারেন, যা মসৃণ অ্যানিমেশন তৈরি করে।

Basic Animation Setup:

// Scene, camera, and renderer setup
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);

// A simple 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;

// Animation function
function animate() {
  requestAnimationFrame(animate);

  // Rotate the cube for animation
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // Render the scene with the camera
  renderer.render(scene, camera);
}

animate();  // Call the animate function to start the animation loop

এখানে, একটি cube তৈরি করা হয়েছে এবং প্রতি ফ্রেমে এটি ঘুরছে (rotate)। requestAnimationFrame() ব্যবহার করে অ্যানিমেশন ফ্রেম রেট কন্ট্রোল করা হয়েছে, যা GPU এর সক্ষমতা অনুযায়ী অ্যানিমেশন ফ্রেম রেট ঠিক রাখে।

২. Animating with Object Movement

Object movement বা স্থানান্তর (translation) হল 3D সিনে অবজেক্টের স্থান পরিবর্তন করা। Three.js-এ একটি অবজেক্টের স্থানান্তর করার জন্য তার পজিশন প্রপার্টি (position) পরিবর্তন করতে হয়।

Moving an Object:

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

// Set the initial position
sphere.position.set(0, 0, 0);

function animate() {
  requestAnimationFrame(animate);

  // Move the sphere along the x-axis
  sphere.position.x += 0.05;

  renderer.render(scene, camera);
}

animate();  // Start the animation loop

এখানে, sphere একটি স্ফিয়ারের অবজেক্ট যা x-axis বরাবর চলতে থাকে। sphere.position.x += 0.05 এর মাধ্যমে প্রতিটি ফ্রেমে এর অবস্থান আপডেট করা হচ্ছে।

৩. Adding Easing to Movement

Easing হল এমন একটি কৌশল, যেখানে অবজেক্টটি একদম সোজা বা সরল পথে চলার পরিবর্তে ধীরে ধীরে গতি বৃদ্ধি বা কমিয়ে একটি প্রাকৃতিক গতির অনুভূতি সৃষ্টি করে। Three.js-এ easing প্রভাব যুক্ত করতে আপনি সাধারণত ত্রিকোণমিতিক বা কিউবিক ফাংশন ব্যবহার করেন।

এখানে একটি উদাহরণ দেওয়া হল যেখানে একটি অবজেক্টের গতিতে easing যোগ করা হয়েছে:

Easing Example:

let start = Date.now();

function animate() {
  requestAnimationFrame(animate);

  // Calculate the time elapsed since the start of the animation
  let elapsed = (Date.now() - start) / 1000;  // Time in seconds

  // Apply easing (for simplicity, using a quadratic easing)
  sphere.position.x = 5 * Math.sin(elapsed);  // Sphere oscillates back and forth

  renderer.render(scene, camera);
}

animate();

এখানে, sphere এক সাইড থেকে অন্য সাইডে চলতে থাকে এবং তার গতিতে easing (sinusoidal easing) যুক্ত হয়েছে, যা প্রাকৃতিক গতির অনুভূতি দেয়।

৪. Camera Movement and Animations

Three.js-এ camera movement অনেক গুরুত্বপূর্ণ। ক্যামেরার মুভমেন্ট ব্যবহার করে আপনি ভিউ বা দৃশ্যের দিক পরিবর্তন করতে পারেন। ক্যামেরাকে সঠিকভাবে নিয়ন্ত্রণ করলে আপনি আপনার 3D দৃশ্যের সঙ্গে ইন্টারঅ্যাকশন তৈরি করতে পারেন, যেমন: প্যান, জুম, টার্নিং ইত্যাদি।

Animating Camera Movement:

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

function animate() {
  requestAnimationFrame(animate);

  // Move the camera forward along the Z axis
  camera.position.z -= 0.05;

  renderer.render(scene, camera);
}

animate();

এখানে, ক্যামেরার z-position ধীরে ধীরে কমানো হচ্ছে, যা দৃশ্যের ভিতরে প্রবাহিত হতে সাহায্য করে।

৫. Event-based Animations

Three.js এর মাধ্যমে আপনি event-based animations তৈরি করতে পারেন, যেখানে ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে অ্যানিমেশন চালানো হয়। এর মধ্যে হতে পারে, মাউস মুভমেন্ট, কিবোর্ড ইনপুট, বা স্ক্রোলিং ইভেন্ট।

Mouse Event Animation:

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

  // Animate object position based on mouse movement
  sphere.position.x = mouseX * 5;  // Scale mouse position to move object
  sphere.position.y = mouseY * 5;
});

এখানে, ব্যবহারকারীর মাউস মুভমেন্টের মাধ্যমে sphere এর অবস্থান পরিবর্তিত হচ্ছে।

৬. Advanced Animation Libraries

Three.js-এর মাধ্যমে আপনি interactivity এবং advanced animations তৈরি করতে আরও অনেক লাইব্রেরি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, GSAP (GreenSock Animation Platform) লাইব্রেরি দিয়ে Three.js-এ আরো উন্নত অ্যানিমেশন তৈরি করা যেতে পারে।

GSAP ব্যবহার করে অ্যানিমেশন:

import { gsap } from "gsap";

gsap.to(sphere.position, {
  duration: 2,
  x: 5,
  y: 5,
  z: 5,
  ease: "power1.inOut"
});

এখানে, GSAP ব্যবহার করে Sphere-এর position অ্যানিমেট করা হয়েছে এবং এটি একটি সুস্পষ্ট easing এবং duration সহ সম্পন্ন হয়েছে।

সারাংশ

Three.js এর মাধ্যমে 3D অ্যানিমেশন এবং মুভমেন্ট তৈরি করার অনেক উপায় রয়েছে। Basic animation থেকে শুরু করে advanced movement, easing, camera movement, এবং event-based animations-এর মতো টেকনিকগুলি ব্যবহার করে আপনি আপনার ওয়েবপেজে জীবন্ত 3D দৃশ্য তৈরি করতে পারেন। এছাড়া, আপনি GSAP বা অন্যান্য অ্যানিমেশন লাইব্রেরি ব্যবহার করে আরও উন্নত এবং সৃজনশীল অ্যানিমেশন তৈরি করতে পারবেন। Three.js আপনাকে একটি সম্পূর্ণ 3D ইন্টারেকটিভ অভিজ্ঞতা তৈরি করার সুযোগ দেয় যা ওয়েব ব্রাউজারে চলতে সক্ষম।

Three.js কি?

Three.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব ব্রাউজারে 3D গ্রাফিক্স তৈরি করতে সহায়তা করে। এটি WebGL প্রযুক্তির উপরে কাজ করে, যা গ্রাফিক্স এবং GPU রেন্ডারিং সুবিধা প্রদান করে, এবং আপনাকে 3D গ্রাফিক্স তৈরি করতে সহায়তা করে।

Three.js ব্যবহার করে আপনি 3D অবজেক্টের বিভিন্ন transformation যেমন Position, Rotation, এবং Scale নিয়ন্ত্রণ করতে পারবেন। এই transformation অপারেশনগুলি ব্যবহৃত হয় 3D স্পেসে অবজেক্টের অবস্থান, কোণ এবং আকার পরিবর্তন করতে।

Object Movement এবং Transformation

Position, Rotation, এবং Scale তিনটি মূল 3D transformation যা 3D অবজেক্টের অবস্থান, কোণ এবং আকার পরিবর্তন করতে ব্যবহৃত হয়।

১. Position (অবস্থান)

Position অবজেক্টের স্থান নির্ধারণ করে। এটি X, Y, এবং Z কোঅর্ডিনেটের মাধ্যমে স্থির করা হয়, যেখানে:

• X: অনুভূমিক (left-right)
• Y: উল্লম্ব (up-down)
• Z: গভীরতা (front-back)

Three.js-এ অবজেক্টের position পরিবর্তন করতে position প্রপার্টি ব্যবহার করা হয়।

উদাহরণ:

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

// Geometry এবং Material তৈরি
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// Cube অবজেক্টের অবস্থান পরিবর্তন
cube.position.set(2, 3, 0); // X=2, Y=3, Z=0

// Scene এ Cube যোগ করা
scene.add(cube);

এখানে, cube অবজেক্টের অবস্থান (2, 3, 0) এ সেট করা হয়েছে, অর্থাৎ এটি X অক্ষরে 2, Y অক্ষরে 3 এবং Z অক্ষরে 0 অবস্থানে থাকবে।

২. Rotation (রোটেশন)

Rotation অবজেক্টের কোণ পরিবর্তন করে। Three.js-এ rotation প্রপার্টি ব্যবহৃত হয় অবজেক্টের রোটেশন নিয়ন্ত্রণ করতে। রোটেশন সাধারণত রেডিয়ানে (radians) সেট করা হয়, কিন্তু ডিগ্রি সিস্টেমেও ব্যবহার করা যেতে পারে।

Three.js-এ রোটেশন তিনটি অক্ষরে করা হয়:

• X-axis (pitch)
• Y-axis (yaw)
• Z-axis (roll)

উদাহরণ:

// Cube রোটেশন
cube.rotation.x = Math.PI / 4;  // 45 ডিগ্রি রোটেশন X অক্ষরে
cube.rotation.y = Math.PI / 2;  // 90 ডিগ্রি রোটেশন Y অক্ষরে

এখানে, cube.rotation.x 45 ডিগ্রি (Math.PI / 4) রোটেশন এবং cube.rotation.y 90 ডিগ্রি (Math.PI / 2) রোটেশন সম্পাদন করা হয়েছে।

৩. Scale (আকার পরিবর্তন)

Scale অবজেক্টের আকার পরিবর্তন করে। এটি X, Y, এবং Z অক্ষরের জন্য আকার বৃদ্ধি বা হ্রাস করতে ব্যবহৃত হয়। Three.js-এ scale পরিবর্তন করতে scale প্রপার্টি ব্যবহার করা হয়।

উদাহরণ:

// Cube এর স্কেল পরিবর্তন
cube.scale.set(2, 1, 1); // X অক্ষরে 2 গুণ, Y অক্ষরে 1 গুণ, Z অক্ষরে 1 গুণ

এখানে, cube এর X অক্ষর 2 গুণ বড় করা হয়েছে, তবে Y এবং Z অক্ষরে স্কেল অপরিবর্তিত রাখা হয়েছে।

৪. Position, Rotation এবং Scale একত্রে ব্যবহার

একাধিক transformation একসাথে প্রয়োগ করতে পারেন, যেমন position, rotation এবং scale একসাথে পরিবর্তন করা।

উদাহরণ:

// Cube এর অবস্থান, রোটেশন এবং স্কেল একত্রে পরিবর্তন
cube.position.set(1, 2, 3);  // অবস্থান পরিবর্তন
cube.rotation.set(Math.PI / 2, Math.PI / 4, 0);  // রোটেশন পরিবর্তন
cube.scale.set(2, 2, 2);  // স্কেল পরিবর্তন

এখানে, cube অবজেক্টের অবস্থান, রোটেশন এবং স্কেল তিনটি একসাথে পরিবর্তন করা হয়েছে।

৫. Animation এবং Object Movement

আপনি যদি অবজেক্টের movement অথবা transformation অ্যানিমেট করতে চান, তবে requestAnimationFrame() ব্যবহার করে একটি অ্যানিমেশন লুপ তৈরি করতে হবে। এর মাধ্যমে অবজেক্টের অবস্থান, রোটেশন বা স্কেল পরিবর্তন হবে এবং এটি ধারাবাহিকভাবে অ্যানিমেট হবে।

উদাহরণ:

let clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  // Time elapsed since the last frame
  let delta = clock.getDelta();  // seconds.

  // Cube এর অবস্থান পরিবর্তন
  cube.position.x += delta * 5;  // প্রতি সেকেন্ডে 5 ইউনিট গতিতে X অক্ষরে মুভ

  // Cube এর রোটেশন পরিবর্তন
  cube.rotation.y += delta * Math.PI; // প্রতি সেকেন্ডে 180 ডিগ্রি রোটেশন

  renderer.render(scene, camera);
}

animate();

এখানে, cube.position.x প্রতি সেকেন্ডে 5 ইউনিট গতিতে পরিবর্তিত হবে এবং cube.rotation.y প্রতি সেকেন্ডে 180 ডিগ্রি রোটেশন করবে।

সারাংশ

Three.js-এ অবজেক্টের Position, Rotation, এবং Scale পরিবর্তন করা হয় অবজেক্টের অবস্থান, কোণ এবং আকার নিয়ন্ত্রণ করতে। এই transformations একত্রে বা আলাদা আলাদা প্রয়োগ করা যেতে পারে। Animation এর মাধ্যমে আপনি এগুলোর পরিবর্তন অ্যানিমেট করতে পারেন এবং 3D অবজেক্টকে জীবন্ত, ইন্টারঅ্যাক্টিভ এবং ডাইনামিক হিসেবে তৈরি করতে পারেন। Three.js-এ এই transformation অপারেশনগুলো গ্রাফিক্স এবং ভিজ্যুয়ালাইজেশন তৈরি করার একটি শক্তিশালী উপায়।

Three.js এর Animation Loop এবং Rendering

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

Animation Loop এবং Rendering এর ভূমিকা

• Animation Loop: এটি একটি লুপ যা প্রতিটি ফ্রেমে 3D দৃশ্যের আপডেট (অ্যানিমেশন) পরিচালনা করে। এই লুপটি প্রতি সেকেন্ডে একাধিকবার চালানো হয়, এবং প্রতিটি ফ্রেমে থ্রি.জেএস সেগুলি অ্যানিমেটেড 3D অবজেক্টের সাথে আপডেট করে।
• Rendering: এটি হল 3D দৃশ্যকে 2D স্ক্রিনে প্রদর্শন করার প্রক্রিয়া। প্রতিটি ফ্রেমের পর, WebGLRenderer বা অন্য rendering উপাদান 3D দৃশ্যকে render করে স্ক্রিনে দেখায়।

Animation Loop এবং Rendering এর প্রক্রিয়া

Three.js এ, আপনি requestAnimationFrame() ব্যবহার করে অ্যানিমেশন লুপ তৈরি করতে পারেন, যা একে একে সব ফ্রেম রেন্ডারিং করতে সাহায্য করে এবং ফ্রেমের মধ্যে smooth অ্যানিমেশন সৃষ্টি করে। সাধারণত, animate() ফাংশনের মধ্যে এই লুপটি থাকে, যা প্রতিটি ফ্রেমে ক্যাল করা হয়।

কিভাবে Animation Loop তৈরি করবেন?

১. Basic Scene Setup

প্রথমে একটি সাধারণ Three.js দৃশ্য সেটআপ করা হয়। এখানে ক্যামেরা, সাইটলাইট, এবং একটি রেন্ডারার যুক্ত করা হয়।

// Scene setup
const scene = new THREE.Scene();

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

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

// Basic cube geometry
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;

এখানে, একটি scene, camera, এবং renderer তৈরি করা হয়েছে, এবং একটি বেসিক cube গঠন করা হয়েছে।

২. Animation Loop এবং Rendering

এখন, আমাদের কোডে অ্যানিমেশন লুপ এবং রেন্ডারিং যোগ করতে হবে। requestAnimationFrame() ব্যবহার করা হবে যাতে ফ্রেমগুলো smooth থাকে।

// Animation Loop
function animate() {
  requestAnimationFrame(animate);

  // Animation: Rotate the cube
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // Render the scene
  renderer.render(scene, camera);
}

// Start the animation
animate();

এখানে, animate() ফাংশনে requestAnimationFrame(animate) ব্যবহার করে প্রতিটি ফ্রেমে অ্যানিমেশন লুপটি চালানো হচ্ছে। cube.rotation.x এবং cube.rotation.y এর মান বাড়িয়ে কিউবের ঘূর্ণন করা হচ্ছে, এবং renderer.render() মাধ্যমে দৃশ্যটি প্রতিটি ফ্রেমে রেন্ডার হচ্ছে।

Animation Loop এর কার্যক্রম

• requestAnimationFrame(): এটি ব্রাউজারের বিল্ট-ইন মেথড, যা কেবল তখনই ফাংশনটিকে কল করে যখন ব্রাউজার পরবর্তী ফ্রেম রেন্ডার করতে প্রস্তুত থাকে। এটি CPU বা GPU এর উপর চাপ কমায় এবং অ্যানিমেশনটি সমান্তরালভাবে পরিচালনা করে।
• Smooth Animation: requestAnimationFrame() ব্যবহার করার ফলে, অ্যানিমেশন অনেক smooth হয় কারণ এটি ব্রাউজারের native animation loop এর সঙ্গে সিঙ্ক্রোনাইজড থাকে, এবং ফ্রেম রেট স্ট্যাবল থাকে।
• Updating the Scene: প্রতিটি ফ্রেমে 3D অবজেক্টগুলির অবস্থান, ঘূর্ণন বা স্কেল পরিবর্তন করার মাধ্যমে অ্যানিমেশন করা যায়। উপরোক্ত উদাহরণে, কিউবটি প্রতি ফ্রেমে x এবং y অক্ষের উপর ঘূর্ণন করছে।

Rendering

Rendering হল সেই প্রক্রিয়া যেখানে থ্রি.জেএস 3D দৃশ্যকে 2D স্ক্রীনে চিত্রিত করে। Three.js এ রেন্ডারিং করার জন্য WebGLRenderer ব্যবহার করা হয়, যা scene এবং camera অবজেক্টের উপর ভিত্তি করে চিত্র তৈরি করে।

renderer.render(scene, camera);

এটি scene এবং camera প্যারামিটার হিসাবে গ্রহণ করে এবং 3D ডেটাকে স্ক্রীনে রেন্ডার করে।

Rendering এবং Animation Loop এর মধ্যে সম্পর্ক

1. Rendering হচ্ছে একটি ক্রমাগত প্রক্রিয়া, যা প্রতিটি ফ্রেমে চলে এবং দৃশ্যটি স্ক্রীনে প্রদর্শন করে।
2. Animation Loop হচ্ছে একটি লুপ যা প্রতি ফ্রেমে চলতে থাকে এবং দৃশ্যে পরিবর্তন করে (যেমন অবজেক্টের ঘূর্ণন, স্থানান্তর বা স্কেল পরিবর্তন)।
3. requestAnimationFrame() মেথডটি একটি উচ্চ কার্যক্ষম অ্যানিমেশন লুপ তৈরি করে এবং এটি rendering এর সাথে সিঙ্ক্রোনাইজড থাকে, ফলে ব্রাউজারের পারফরম্যান্স সুরক্ষিত থাকে।

Performance Tips

• Object Updates: অ্যানিমেশন চলাকালে শুধুমাত্র প্রয়োজনীয় অবজেক্টগুলির অবস্থান আপডেট করা উচিত, যাতে অ্যানিমেশনটি স্মুথ থাকে এবং পারফরম্যান্স কমপ্লেক্সিটির মধ্যে থাকে।
• Clear the Frame: প্রতিটি রেন্ডারিং সেশনের আগে পুরানো ফ্রেম পরিষ্কার করা উচিত যাতে পুনরাবৃত্তি না ঘটে এবং render process অপ্টিমাইজড থাকে।
• Use of requestAnimationFrame(): ব্রাউজারের native loop ব্যবহার করলে অ্যানিমেশন পারফরম্যান্স আরও উন্নত হবে, কারণ এটি সিস্টেমের রিসোর্সগুলির অপটিমাইজড ব্যবহার নিশ্চিত করে।

সারাংশ

Three.js এ Animation Loop এবং Rendering দুইটি অত্যন্ত গুরুত্বপূর্ণ বিষয়। requestAnimationFrame() ব্যবহার করে একটি smooth এবং কার্যকরী অ্যানিমেশন লুপ তৈরি করা যায়, যা 3D দৃশ্যের একাধিক অবজেক্টের অবস্থান, স্কেল এবং ঘূর্ণন পরিবর্তন করে। Rendering ফ্রেমগুলোর উপর ভিত্তি করে দৃশ্যের চিত্র 2D স্ক্রীনে প্রদর্শন করে, এবং এটি প্রতি ফ্রেমে ঘটে। এই দুটি প্রক্রিয়ার মধ্যে সিঙ্ক্রোনাইজড কার্যক্রম একটি অভ্যন্তরীণ এবং স্মুথ অ্যানিমেশন নিশ্চিত করে, যা 3D গ্রাফিক্সের জন্য গুরুত্বপূর্ণ।

Tween.js কি?

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

Tween.js টাইম বেসড অ্যানিমেশন প্রদান করে, যেখানে আপনি সুনির্দিষ্ট গতি, সময়, ইased transitions (অর্থাৎ, শুরুতে দ্রুত, শেষে ধীরে) ইত্যাদি কাস্টমাইজ করতে পারেন।

Three.js এর সাথে Tween.js এর সমন্বয়

Three.js ব্যবহার করে আপনি 3D গ্রাফিক্স এবং সীনে বিভিন্ন এলিমেন্ট তৈরির পাশাপাশি, Tween.js ব্যবহার করে তাদের মসৃণ অ্যানিমেশন বা ট্রান্সফরমেশন অ্যাপ্লাই করতে পারবেন। আপনি 3D অবজেক্ট, ক্যামেরা, এবং লাইট ইত্যাদি সৃজনশীলভাবে অ্যানিমেট করতে পারেন।

এই গাইডে আমরা দেখব কিভাবে Three.js সীনের সাথে Tween.js ইন্টিগ্রেট করে মসৃণ অ্যানিমেশন তৈরি করা যায়।

Tween.js ইনস্টলেশন

প্রথমে, Tween.js ইনস্টল করতে হবে। আপনি npm বা CDN ব্যবহার করে এটি ইনস্টল করতে পারেন।

1. npm এর মাধ্যমে ইনস্টলেশন:

npm install @tweenjs/tween.js

2. CDN এর মাধ্যমে ইনস্টলেশন:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>

Three.js এর সাথে Tween.js ব্যবহার

এখন, আসুন একটি সাধারণ উদাহরণ দেখি যেখানে একটি Cube 3D অবজেক্টকে Tween.js ব্যবহার করে অ্যানিমেট করা হবে।

Three.js এবং Tween.js এর সমন্বয়ে একটি সহজ উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js with Tween.js</title>
  <style>
    body { margin: 0; overflow: hidden; }
    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/tween.js/18.6.4/tween.umd.js"></script>
  <script>
    let scene, camera, renderer, cube, clock;

    // Scene Setup
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

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

    // Camera Position
    camera.position.z = 5;

    // Animation using Tween.js
    const tween = new TWEEN.Tween(cube.position)
      .to({ x: 2, y: 2, z: 2 }, 2000) // Move to (2, 2, 2) over 2 seconds
      .easing(TWEEN.Easing.Quadratic.Out) // Easing function for smooth movement
      .start();

    // Render and animate
    clock = new THREE.Clock();
    function animate() {
      requestAnimationFrame(animate);

      // Update Tween.js animations
      TWEEN.update();

      // Rendering the scene
      renderer.render(scene, camera);
    }

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

উদাহরণ ব্যাখ্যা:

1. Scene, Camera, and Renderer: আমরা প্রথমে Three.js এর মাধ্যমে সীন, ক্যামেরা এবং রেন্ডারার সেটআপ করেছি। সীনটি একটি 3D স্পেস, ক্যামেরা হলো দৃশ্য দেখানোর জন্য এবং রেন্ডারার হলো সেই দৃশ্য প্রদর্শন করার জন্য।
2. Cube Creation: আমরা একটি কিউব তৈরি করেছি যা সীন এ যুক্ত করা হয়েছে। এটি BoxGeometry এবং MeshBasicMaterial ব্যবহার করে তৈরি করা হয়েছে।
3. Tween.js এর ব্যবহার:
   • আমরা একটি Tween অবজেক্ট তৈরি করেছি যা কিউবের position পরিবর্তন করবে। এই ক্ষেত্রে, কিউবের x, y, এবং z কোঅর্ডিনেট 0 থেকে 2 এ অ্যানিমেট হবে 2 সেকেন্ডের মধ্যে।
   • Easing এর মাধ্যমে, TWEEN.Easing.Quadratic.Out ব্যবহার করা হয়েছে যা শুরুতে দ্রুত এবং শেষে ধীরে ধীরে গতির পরিবর্তন ঘটায়।
4. Rendering: requestAnimationFrame ব্যবহার করে, অ্যানিমেশন চালু রাখা হয়েছে এবং TWEEN.update() দিয়ে অ্যানিমেশন আপডেট করা হচ্ছে।

Easing Functions

Tween.js এ বিভিন্ন ধরনের easing ফাংশন রয়েছে যা অ্যানিমেশনকে আরও সাশ্রয়ী এবং মসৃণ করে তোলে। কিছু জনপ্রিয় easing ফাংশন হলো:

• TWEEN.Easing.Linear.None: সরল লিনিয়ার গতিতে অ্যানিমেশন।
• TWEEN.Easing.Quadratic.In: শুরুতে ধীরে এবং পরে দ্রুত।
• TWEEN.Easing.Quadratic.Out: শুরুতে দ্রুত এবং পরে ধীরে।
• TWEEN.Easing.Cubic.InOut: একটি মসৃণ “S” আকারে গতি পরিবর্তন।

এই easing ফাংশনগুলো ব্যবহার করে আপনি অ্যানিমেশনের গতির ধরণ নিয়ন্ত্রণ করতে পারবেন।

Advanced Tweens: Multiple Animations

আপনি একাধিক অ্যানিমেশন তৈরি করতে এবং সেগুলোর মধ্যে সমন্বয় রাখতে tween.js ব্যবহার করতে পারেন। একাধিক tween একসাথে ব্যবহার করা হলে, আপনি আরো জটিল অ্যানিমেশন তৈরি করতে পারবেন।

উদাহরণ: একাধিক অ্যানিমেশন

const tween1 = new TWEEN.Tween(cube.position)
  .to({ x: 3 }, 1000)
  .easing(TWEEN.Easing.Cubic.Out);

const tween2 = new TWEEN.Tween(cube.rotation)
  .to({ y: Math.PI * 2 }, 1000)
  .easing(TWEEN.Easing.Linear.None);

tween1.chain(tween2); // When tween1 completes, tween2 will start
tween1.start();

এখানে, প্রথমে কিউবের position.x এর পরিবর্তন হবে, এরপর তার rotation.y এর পরিবর্তন হবে।

সারাংশ

Tween.js ব্যবহার করে আপনি Three.js এর মাধ্যমে 3D অ্যানিমেশন তৈরি করতে পারেন। Tween.js এর সাহায্যে আপনি সহজে মসৃণ অ্যানিমেশন তৈরি করতে পারবেন, যেখানে আপনি easing functions, timing, এবং multiple tweens ব্যবহার করে ডেটা অ্যানিমেট করতে পারেন। এটি Three.js এর সাথে একত্রে ব্যবহার করলে ওয়েব পেজে 3D অবজেক্টের মসৃণ এবং প্রফেশনাল অ্যানিমেশন তৈরি করা সহজ হয়ে ওঠে।

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-এ আরও সমৃদ্ধ এবং জটিল অ্যানিমেশন তৈরি করা যায়, যা ওয়েব ডেভেলপমেন্টে অত্যন্ত কার্যকরী।