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>
উদাহরণ ব্যাখ্যা:
- Scene, Camera, and Renderer: আমরা প্রথমে Three.js এর মাধ্যমে সীন, ক্যামেরা এবং রেন্ডারার সেটআপ করেছি। সীনটি একটি 3D স্পেস, ক্যামেরা হলো দৃশ্য দেখানোর জন্য এবং রেন্ডারার হলো সেই দৃশ্য প্রদর্শন করার জন্য।
- Cube Creation: আমরা একটি কিউব তৈরি করেছি যা সীন এ যুক্ত করা হয়েছে। এটি BoxGeometry এবং MeshBasicMaterial ব্যবহার করে তৈরি করা হয়েছে।
- Tween.js এর ব্যবহার:
- আমরা একটি Tween অবজেক্ট তৈরি করেছি যা কিউবের position পরিবর্তন করবে। এই ক্ষেত্রে, কিউবের
x,y, এবংzকোঅর্ডিনেট 0 থেকে 2 এ অ্যানিমেট হবে 2 সেকেন্ডের মধ্যে। - Easing এর মাধ্যমে,
TWEEN.Easing.Quadratic.Outব্যবহার করা হয়েছে যা শুরুতে দ্রুত এবং শেষে ধীরে ধীরে গতির পরিবর্তন ঘটায়।
- আমরা একটি Tween অবজেক্ট তৈরি করেছি যা কিউবের position পরিবর্তন করবে। এই ক্ষেত্রে, কিউবের
- 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 অবজেক্টের মসৃণ এবং প্রফেশনাল অ্যানিমেশন তৈরি করা সহজ হয়ে ওঠে।
Read more
