Three.js কি?
Three.js একটি JavaScript লাইব্রেরি যা WebGL ব্যবহার করে 3D গ্রাফিক্স এবং এনিমেশন তৈরি করতে সাহায্য করে। এটি ডেভেলপারদের জন্য একটি সহজতর ইন্টারফেস প্রদান করে, যার মাধ্যমে তারা ওয়েব ব্রাউজারে 3D কন্টেন্ট প্রদর্শন করতে পারে। WebGL এর জটিলতা থেকে মুক্তি পেতে Three.js ডেভেলপারদের অনেক ব্যবহারিক ফিচার এবং টুলস প্রদান করে, যার মাধ্যমে তারা 3D অবজেক্ট, শেইপ এবং এনিমেশন সহজেই তৈরি করতে পারে।
এখানে আমরা Basic Shapes এবং Mesh তৈরি করার জন্য Three.js এর মৌলিক বিষয়গুলো সম্পর্কে আলোচনা করব।
Three.js এর মূল উপাদানসমূহ
- Scene: থ্রি.জেএস এর মধ্যে 3D কন্টেন্টের ধারণস্থল। এখানে সব 3D অবজেক্ট, ক্যামেরা, এবং লাইট থাকবে।
- Camera: এই উপাদানটি দৃশ্যের দৃশ্যপট নির্ধারণ করে, অর্থাৎ আপনি কোন দিক থেকে দৃশ্য দেখবেন।
- Renderer: এটি স্ক্রীনে 3D দৃশ্য দেখানোর জন্য ব্যবহৃত হয়। সাধারণত
WebGLRendererব্যবহার করা হয়। - Object3D: Three.js এর সমস্ত অবজেক্ট 3D অবজেক্ট (Object3D) থেকে ইনহেরিট করে, যা একটি জেনেরিক ক্লাস যা 3D স্পেসে অবস্থান, রোটেশন, স্কেল ইত্যাদি সেট করতে সাহায্য করে।
Basic Shapes এবং Mesh তৈরি করা
Basic Shapes এবং Mesh তৈরি করতে, প্রথমে geometry এবং material তৈরি করতে হবে। তারপর সেগুলোকে একত্রিত করে একটি mesh তৈরি করা হবে, যা স্ক্রীনে প্রদর্শিত হবে।
১. Scene, Camera এবং Renderer তৈরি করা
প্রথমে একটি scene, camera এবং renderer তৈরি করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Basic Shapes</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Scene তৈরি করা
const scene = new THREE.Scene();
// Camera তৈরি করা
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Renderer তৈরি করা
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Camera কে দৃশ্যের মধ্যে সেট করা
camera.position.z = 5;
</script>
</body>
</html>
এখানে, scene তৈরি করা হয়েছে যাতে সমস্ত 3D অবজেক্ট থাকবে। camera দৃশ্যপট দেখানোর জন্য ব্যবহৃত হয়, এবং renderer সেট করা হয়েছে ওয়েবপৃষ্ঠায় 3D কন্টেন্ট প্রদর্শন করতে।
২. Basic Shapes তৈরি করা
এখন আমরা কিছু basic shapes তৈরি করব, যেমন Cube (কিউব), Sphere (গোলক) এবং Cylinder (সিলিন্ডার)। এ জন্য, THREE.BoxGeometry, THREE.SphereGeometry, এবং THREE.CylinderGeometry ব্যবহার করা হবে।
কিউব তৈরি করা:
const geometry = new THREE.BoxGeometry(1, 1, 1); // কিউব গঠনের জন্য geometry
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // সবুজ রঙের ম্যাটেরিয়াল
const cube = new THREE.Mesh(geometry, material); // কিউব Mesh তৈরি করা
scene.add(cube); // কিউব সিনে যোগ করা
গোলক তৈরি করা:
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); // গোলকের জন্য geometry
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // নীল রঙের ম্যাটেরিয়াল
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // গোলক Mesh তৈরি করা
sphere.position.x = 3; // গোলককে x অক্ষরে সরানো
scene.add(sphere); // গোলক সিনে যোগ করা
সিলিন্ডার তৈরি করা:
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32); // সিলিন্ডারের জন্য geometry
const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // লাল রঙের ম্যাটেরিয়াল
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial); // সিলিন্ডার Mesh তৈরি করা
cylinder.position.x = -3; // সিলিন্ডারকে x অক্ষরে সরানো
scene.add(cylinder); // সিলিন্ডার সিনে যোগ করা
৩. Mesh এবং Material
Mesh হচ্ছে একটি 3D অবজেক্ট যা geometry এবং material এর সংমিশ্রণ। geometry হল অবজেক্টের আকার, এবং material হল তার পৃষ্ঠের বৈশিষ্ট্য (যেমন রঙ, টেক্সচার, শেডিং ইত্যাদি)। উপরের কোডে প্রতিটি অবজেক্টের জন্য BoxGeometry, SphereGeometry, এবং CylinderGeometry ব্যবহার করা হয়েছে, এবং তাদের জন্য MeshBasicMaterial ম্যাটেরিয়াল ব্যবহার করা হয়েছে।
৪. অ্যানিমেশন (Animation)
এখন আমাদের basic shapes সবার সঙ্গে কিছু অ্যানিমেশন যোগ করা দরকার। এখানে কিউবের উপর একটি সহজ অ্যানিমেশন দেখানো হয়েছে যেখানে কিউবটি রোটেট হবে।
function animate() {
requestAnimationFrame(animate);
// কিউবের উপর রোটেশন অ্যানিমেশন
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Renderer রেন্ডারিং করছে
renderer.render(scene, camera);
}
animate();
এখানে, requestAnimationFrame() ব্যবহার করে অ্যানিমেশন তৈরি করা হয়েছে যা প্রতি ফ্রেমে কল হয় এবং কিউবটি x এবং y অক্ষরে রোটেট করবে।
৫. ভিউপোর্ট রিসাইজ সাপোর্ট
এখন আমরা স্ক্রীনের আকার পরিবর্তনের সময় সঠিকভাবে 3D দৃশ্যের আকার পরিবর্তন করতে চাই।
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
এটি স্ক্রীন রিসাইজ হওয়ার সময় renderer এবং camera কে আপডেট করবে যাতে 3D দৃশ্য সঠিকভাবে স্কেল হয়।
সারাংশ
Three.js এর মাধ্যমে আপনি সহজেই basic shapes এবং meshes তৈরি করতে পারেন এবং তাদের উপরে অ্যানিমেশন ও ইন্টারঅ্যাকশন যোগ করতে পারেন। উপরিউক্ত উদাহরণগুলো আপনাকে geometry, material, এবং mesh এর মধ্যে সম্পর্ক এবং কিভাবে Three.js ব্যবহার করে 3D দৃশ্য তৈরি করা যায় তা বুঝতে সাহায্য করবে। এগুলোর মাধ্যমে আপনি আরও উন্নত 3D অবজেক্ট এবং এনিমেশন তৈরি করতে পারবেন যা ওয়েব ব্রাউজারে সরাসরি দেখানো যায়।
Read more
