Three.js কি?
Three.js একটি জনপ্রিয় এবং শক্তিশালী 3D গ্রাফিক্স লাইব্রেরি যা WebGL-এর উপরে তৈরি হয়েছে। এটি ওয়েব ব্রাউজারে ত্রিমাত্রিক গ্রাফিক্স, এনিমেশন, এবং ভিজ্যুয়ালাইজেশন তৈরি করার জন্য ব্যবহৃত হয়। Three.js আপনাকে 3D গ্রাফিক্স এবং শেডিংয়ের জন্য সহজ উপায় প্রদান করে, যা JavaScript কোডের মাধ্যমে ব্রাউজারে বাস্তবায়িত হয়। এটি গ্রাফিক্স তৈরির জন্য বিভিন্ন ফিচার যেমন ক্যামেরা, লাইট, 3D অবজেক্ট, মেটেরিয়াল, এবং রেন্ডারিং টেকনিক্স ব্যবহার করতে দেয়।
Three.js ইন্সটলেশন
Three.js ইন্সটল করার দুটি প্রধান পদ্ধতি রয়েছে:
- CDN এর মাধ্যমে।
- npm এর মাধ্যমে।
নিচে উভয় পদ্ধতির বিস্তারিত আলোচনা করা হলো।
১. CDN ব্যবহার করে Three.js ইন্সটলেশন
CDN (Content Delivery Network) ব্যবহার করে Three.js ইনস্টল করা একটি সহজ এবং দ্রুত উপায়। এতে আপনাকে কোন ফাইল ডাউনলোড বা লোকালি ইন্সটল করার প্রয়োজন হয় না। শুধু একটি স্ক্রিপ্ট ট্যাগ দিয়ে ব্রাউজারে লাইব্রেরিটি লোড করা হয়।
CDN এর মাধ্যমে Three.js ইন্সটল করা:
- প্রথমে, আপনার 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>
<!-- Add Three.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script>
</head>
<body>
<script>
// Your Three.js code goes here
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
এখানে, <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script> লাইনটি Three.js লাইব্রেরি লোড করার জন্য ব্যবহৃত হয়। আপনি এখানে CDN ভার্সন 0.142.0 ব্যবহার করছেন, তবে আপনি অন্য ভার্সনও ব্যবহার করতে পারেন।
২. npm ব্যবহার করে Three.js ইন্সটলেশন
npm (Node Package Manager) ব্যবহার করে Three.js ইন্সটল করা হয় যদি আপনি একটি Node.js প্রোজেক্টে Three.js ব্যবহার করতে চান। এটি তখন কার্যকরী হবে যখন আপনি টুলস, কম্পাইলেশন, এবং প্যাকেজিং করার জন্য Webpack, Parcel, বা Vite ব্যবহার করবেন।
npm এর মাধ্যমে Three.js ইন্সটল করা:
- Node.js এবং npm ইন্সটল করা আছে কি না, তা নিশ্চিত করুন। আপনি
node -vএবংnpm -vকমান্ড দিয়ে এটি চেক করতে পারেন। - আপনার প্রোজেক্ট ডিরেক্টরিতে যান এবং npm ইন্সটল করুন:
mkdir my-threejs-project
cd my-threejs-project
npm init -y
- এরপর Three.js প্যাকেজটি ইন্সটল করুন:
npm install three
- ইনস্টলেশনের পর, আপনি আপনার JavaScript কোডে Three.js ইম্পোর্ট করতে পারবেন:
import * as THREE from 'three';
// Your Three.js code goes here
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
এখানে, import * as THREE from 'three' ব্যবহার করে আপনি Three.js এর সমস্ত ফিচার এবং মডিউলকে ইম্পোর্ট করছেন। আপনার বিল্ডিং টুলস (যেমন Webpack বা Vite) সঠিকভাবে কনফিগার করতে হবে যাতে আপনি ES6 মডিউল ব্যবহার করতে পারেন।
সারাংশ
Three.js লাইব্রেরি ওয়েব ব্রাউজারে 3D গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। আপনি CDN বা npm ব্যবহারের মাধ্যমে Three.js ইন্সটল করতে পারেন, যেটি আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী নির্বাচিত করা যেতে পারে। CDN ব্যবহার করা সহজ এবং দ্রুত উপায়, বিশেষত ছোট প্রোজেক্টের জন্য, যেখানে আপনি ফাইলগুলোকে সরাসরি লোড করতে চান। অপরদিকে, npm ব্যবহার করা হয় যখন আপনার প্রোজেক্টের বড় স্কেল থাকে এবং আপনি মডিউলার সিস্টেম বা বিল্ড টুলস ব্যবহার করতে চান।
এখন আপনি Three.js ব্যবহার করে ওয়েব ব্রাউজারে শক্তিশালী 3D গ্রাফিক্স তৈরি করতে প্রস্তুত!
Read more
