Three.js কী?
Three.js একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স ওয়েব পেজে প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে এবং আপনি HTML এবং CSS ব্যবহার করে ওয়েব ব্রাউজারে ত্রিমাত্রিক গ্রাফিক্স এবং ভিজ্যুয়াল ইফেক্টস তৈরি করতে পারেন। Three.js এর মাধ্যমে আপনি খুব সহজে 3D স্যিন তৈরি করতে পারেন, যেখানে শেপ, মডেল, লাইটিং, ক্যামেরা, এবং অন্যান্য 3D উপাদানগুলি ব্যবহৃত হয়।
কেন Three.js ব্যবহার করবেন?
- সহজ এবং সহজেই শেখা: Three.js এর ব্যবহার এবং ডকুমেন্টেশন খুবই সরল এবং বোঝার জন্য সহজ।
- ব্রাউজারে রেন্ডারিং: এটি ব্রাউজারের মধ্যে নেটিভ WebGL এর মাধ্যমে 3D গ্রাফিক্স রেন্ডারিং করতে সক্ষম।
- বিভিন্ন প্ল্যাটফর্মে সমর্থন: WebGL এর উপর ভিত্তি করে এটি সমস্ত মডার্ন ব্রাউজারে কাজ করে, এবং এটি ডেস্কটপ এবং মোবাইল উভয় প্ল্যাটফর্মে সমর্থিত।
- লাইভ 3D মডেলিং: আপনি Three.js ব্যবহার করে লাইভ 3D মডেল তৈরি করতে পারেন, যা গেম, ইন্টারেক্টিভ ওয়েবসাইট, বা আরও উন্নত 3D ভিজ্যুয়ালাইজেশন তৈরিতে সহায়ক।
Three.js এর জন্য পরিবেশ প্রস্তুত করা
Three.js এর মাধ্যমে 3D গ্রাফিক্স তৈরি করতে প্রথমে আপনাকে কিছু সরঞ্জাম এবং লাইব্রেরি ইনস্টল করতে হবে। পরিবেশ প্রস্তুত করার জন্য নিচে পদক্ষেপগুলি অনুসরণ করুন:
১. Node.js এবং NPM ইনস্টল করা
Three.js ব্যবহার করার জন্য প্রথমেই Node.js ইনস্টল করতে হবে, কারণ এটি প্যাকেজ ম্যানেজার NPM বা Yarn এর সাথে সঙ্গতিপূর্ণ এবং লাইব্রেরি ইনস্টল করার জন্য প্রয়োজনীয়।
- Node.js ডাউনলোড এবং ইনস্টল করা:
- Node.js অফিসিয়াল ওয়েবসাইট থেকে LTS ভার্সন ডাউনলোড করুন এবং ইনস্টল করুন।
ইনস্টলেশন নিশ্চিত করতে টার্মিনালে নিচের কমান্ডটি ব্যবহার করুন:
node -v npm -v
২. Three.js ইনস্টল করা
Three.js ব্যবহারের জন্য আপনাকে প্রথমে এটি ইনস্টল করতে হবে। আপনি এটি NPM বা CDN এর মাধ্যমে ইনস্টল করতে পারেন।
NPM ব্যবহার করে Three.js ইনস্টল করা:
- আপনার প্রোজেক্ট ফোল্ডারে গিয়ে
npm initকমান্ড দিয়ে একটি নতুন Node.js প্রোজেক্ট তৈরি করুন। এরপর, Three.js ইনস্টল করতে নীচের কমান্ডটি ব্যবহার করুন:
npm install three
CDN এর মাধ্যমে Three.js ইনস্টল করা:
আপনি যদি CDN ব্যবহার করতে চান, তবে আপনার HTML ফাইলে নিচের <script> ট্যাগটি যুক্ত করতে পারেন:
<script src="https://cdn.jsdelivr.net/npm/three@0.137.5/build/three.min.js"></script>
৩. প্রোজেক্টের ফাইল স্ট্রাকচার তৈরি করা
Three.js প্রোজেক্টে বিভিন্ন ফাইল তৈরি করার জন্য একটি সাধারণ স্ট্রাকচার নিচে দেওয়া হল:
my-threejs-project/
├── index.html
├── main.js
├── style.css
└── assets/
└── model/
└── my-model.obj
- index.html: আপনার HTML ডকুমেন্ট যেখানে 3D গ্রাফিক্স প্রদর্শিত হবে।
- main.js: এই ফাইলে আপনি Three.js এর কোড লিখবেন, যেমন স্যিন, ক্যামেরা, লাইট, এবং 3D অবজেক্ট তৈরি করবেন।
- style.css: ওয়েব পেজের স্টাইলিং।
৪. প্রথম 3D স্যিন তৈরি করা
Three.js দিয়ে প্রথম 3D স্যিন তৈরি করার জন্য নীচের কোড ব্যবহার করা যেতে পারে। এটি একটি বেসিক স্যিন যেখানে একটি কিউব (Cube) প্রদর্শিত হবে।
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Example</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.137.5/build/three.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js:
// 1. Scene
const scene = new THREE.Scene();
// 2. Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 3. Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. Create a Cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 5. Set the camera position
camera.position.z = 5;
// 6. Animation function
function animate() {
requestAnimationFrame(animate);
// Rotate the cube for some animation effect
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Render the scene
renderer.render(scene, camera);
}
// 7. Start the animation loop
animate();
style.css (optional):
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
৫. Live Server চালানো
এখন আপনি আপনার প্রোজেক্ট চালানোর জন্য একটি Live Server ব্যবহার করতে পারেন। আপনি VS Code ব্যবহার করছেন তবে তার Live Server extension ইনস্টল করতে পারেন, অথবা আপনি নীচের কোড দিয়ে একটি সহজ HTTP সার্ভার চালাতে পারেন:
Live Server চালানোর জন্য:
npm install -g live-server live-server
এটি আপনার প্রোজেক্ট ফোল্ডারে গিয়ে টার্মিনাল থেকে চালাতে হবে এবং এরপর আপনার ব্রাউজারে http://localhost:8080 এ গিয়ে দেখতে পারবেন।
সারাংশ
Three.js ব্যবহার করার জন্য আপনার সিস্টেমে Node.js, NPM বা Yarn ইনস্টল করা থাকতে হবে। এরপর, আপনি Three.js লাইব্রেরি ইনস্টল করে 3D স্যিন তৈরি শুরু করতে পারেন। HTML, CSS, এবং JavaScript এর সমন্বয়ে আপনি একটি সম্পূর্ণ 3D গ্রাফিক্স পরিবেশ তৈরি করতে পারবেন। Three.js এর মাধ্যমে আপনি সহজে ব্রাউজারে 3D গ্রাফিক্স প্রদর্শন করতে পারবেন এবং এর জন্য সঠিক পরিবেশ প্রস্তুত করা অত্যন্ত গুরুত্বপূর্ণ।
Read more
