Three.js কি?
Three.js হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে সাহায্য করে। এটি WebGL-এর উপরে একটি এপিআই (API) তৈরি করেছে, যা ব্রাউজারে 3D গ্রাফিক্স রেন্ডারিং সহজ এবং অ্যাক্সেসযোগ্য করে তোলে। Three.js-এর মাধ্যমে আপনি ত্রি-মাত্রিক মডেল, দৃশ্য, ক্যামেরা, আলো, এবং আরও অনেক কিছু তৈরি করতে পারেন এবং সেগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারেন।
কেন Three.js ব্যবহার করবেন?
Three.js ব্যবহার করার কিছু প্রধান কারণ হলো:
- সহজ এবং দ্রুত 3D গ্রাফিক্স তৈরির জন্য: Three.js একটি খুবই শক্তিশালী 3D লাইব্রেরি, যা সহজেই 3D গ্রাফিক্স তৈরি এবং কাস্টমাইজ করতে সাহায্য করে।
- WebGL এর উপর ভিত্তি করে কাজ করে: Three.js WebGL কে সরল এবং সহজে ব্যবহারযোগ্য করে তোলে, যা সাধারণত জটিল এবং সময়সাপেক্ষ হতে পারে।
- বিভিন্ন 3D মডেলিং ফরম্যাট সমর্থন করে: Three.js অনেক ধরনের 3D ফাইল ফরম্যাট যেমন OBJ, GLTF, FBX ইত্যাদি সমর্থন করে।
এখন চলুন, Three.js ব্যবহার করে একটি সাধারণ 3D প্রজেক্ট তৈরি করা শিখি।
প্রথম Three.js প্রজেক্ট তৈরি করা
ধাপ ১: Three.js ইনস্টল করা
প্রথমে, Three.js লাইব্রেরি আপনার প্রজেক্টে যোগ করতে হবে। আপনি CDN অথবা NPM প্যাকেজ ম্যানেজার ব্যবহার করে এটি ইনস্টল করতে পারেন।
CDN ব্যবহারের মাধ্যমে:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
এটি আপনার HTML ফাইলে <head> ট্যাগে যোগ করুন।
NPM ব্যবহারের মাধ্যমে:
npm install three
যদি আপনি Node.js প্রকল্পে কাজ করেন, তাহলে npm বা yarn ব্যবহার করে Three.js ইনস্টল করুন।
ধাপ ২: একটি HTML ফাইল তৈরি করা
এখন, আপনি একটি HTML ফাইল তৈরি করবেন যেখানে আপনার 3D দৃশ্য রেন্ডার করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Three.js Project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
// Three.js কোড এখানে থাকবে
</script>
</body>
</html>
ধাপ ৩: প্রথম 3D দৃশ্য তৈরি করা
এখন আমরা 3D সীন তৈরি করব, যা একটি কিউব (Cube) প্রদর্শন করবে। আমাদের কিছু প্রধান উপাদান দরকার:
- Scene: 3D অবজেক্ট রাখার জন্য একটি কন্টেইনার।
- Camera: দৃশ্য দেখতে একটি ক্যামেরা।
- Renderer: 3D দৃশ্য রেন্ডার করতে একটি রেন্ডারার।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Three.js Project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
// Step 1: Scene, Camera, and Renderer Setup
// Create a scene
const scene = new THREE.Scene();
// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Create a WebGLRenderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // Add the renderer to the DOM
// Step 2: Create a Cube
// Create a geometry (cube) and material
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// Combine geometry and material to create a cube
const cube = new THREE.Mesh(geometry, material);
// Add the cube to the scene
scene.add(cube);
// Step 3: Position the camera
camera.position.z = 5;
// Step 4: Create an animation loop
function animate() {
requestAnimationFrame(animate); // Call animate again for the next frame
// Rotate the cube to make it spin
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Render the scene with the camera
renderer.render(scene, camera);
}
animate(); // Start the animation loop
</script>
</body>
</html>
এখানে, একটি cube তৈরি করা হয়েছে এবং animate() ফাংশনের মাধ্যমে এটি ঘোরানো হচ্ছে। WebGLRenderer ব্যবহার করে 3D দৃশ্যটি রেন্ডার করা হচ্ছে।
ধাপ ৪: ব্রাউজারে প্রজেক্ট দেখুন
এখন, আপনার HTML ফাইলটি ব্রাউজারে ওপেন করুন এবং আপনি একটি ঘোরানো 3D কিউব দেখতে পাবেন।
Three.js এর সাথে আরও কি করতে পারেন?
- Lights and Shadows: আলোর ব্যবহার এবং শ্যাডো প্রভাব যোগ করা।
- Textures and Materials: টেক্সচার এবং ম্যাটেরিয়াল ব্যবহার করে দৃশ্য আরও সুন্দর করা।
- 3D Models: FBX, GLTF, OBJ ফরম্যাটের 3D মডেল ইমপোর্ট করা।
- Camera Controls: ক্যামেরার জন্য ব্যবহারকারী নিয়ন্ত্রণ (OrbitControls) যোগ করা।
- Animation: 3D অবজেক্টের অ্যানিমেশন তৈরি করা।
সারাংশ
এটি ছিল আপনার প্রথম Three.js প্রজেক্ট তৈরি করার একটি সহজ উদাহরণ। Three.js ব্যবহার করে আপনি খুব সহজে 3D গ্রাফিক্স তৈরি করতে পারেন এবং ওয়েব পেজে ইন্টারেক্টিভ 3D দৃশ্য যোগ করতে পারেন। প্রাথমিক পর্যায়ে, আপনি একটি 3D কিউব তৈরি করেছেন এবং এটি ঘোরানো দেখেছেন। পরবর্তী ধাপে আপনি আরো উন্নত কনসেপ্ট যেমন আলোর ব্যবহার, শ্যাডো, টেক্সচার, 3D মডেলিং এবং ক্যামেরা নিয়ন্ত্রণ শিখতে পারেন।
Read more
