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 অপারেশনগুলো গ্রাফিক্স এবং ভিজ্যুয়ালাইজেশন তৈরি করার একটি শক্তিশালী উপায়।
Read more
