Three.js এবং Model Loader
Three.js হল একটি জনপ্রিয় JavaScript লাইব্রেরি যা WebGL এর উপর ভিত্তি করে 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি শক্তিশালী টুল যা আপনাকে 3D মডেল, সিন, ক্যামেরা, লাইট ইত্যাদি সহজে তৈরি এবং নিয়ন্ত্রণ করতে সহায়তা করে।
Model Loader হল একটি ফিচার যা আপনাকে বাইরের 3D মডেল ফাইল (যেমন .obj, .fbx, .glTF ইত্যাদি) আপনার 3D সিনে লোড করতে সাহায্য করে। Three.js মডেল লোডারগুলির সাহায্যে আপনি বিভিন্ন ফরম্যাটে মডেল লোড করতে পারবেন এবং সেগুলোকে আপনার 3D দৃশ্যে ব্যবহার করতে পারবেন।
এই টিউটোরিয়ালে আমরা দেখব কিভাবে External Models (যেমন .glTF, .obj) লোড করা যায় Three.js-এ।
Model Loader এর গুরুত্ব
Three.js এর মধ্যে বিভিন্ন ধরনের মডেল লোডার ফাংশন রয়েছে, যেগুলি বিভিন্ন ধরনের ফাইল ফরম্যাটের সাথে কাজ করে। যেমন:
- glTFLoader:
.glTFফাইল লোড করতে ব্যবহৃত হয়, যা 3D মডেল এবং টেক্সচারসহ সম্পূর্ণ দৃশ্য উপস্থাপন করে। - OBJLoader:
.objফাইল লোড করতে ব্যবহৃত হয়। - FBXLoader:
.fbxফাইল লোড করতে ব্যবহৃত হয়। - STLLoader:
.stlফাইল লোড করতে ব্যবহৃত হয়।
এখন, আমরা glTF ফাইল লোড করার একটি উদাহরণ দেখব, যা একটি জনপ্রিয় ফরম্যাট 3D মডেল তৈরি করার জন্য।
Three.js-এ External Model লোড করার জন্য Setup
প্রথমে, আমরা glTF ফাইল লোড করতে GLTFLoader ব্যবহার করব। এর জন্য Three.js-এ মডেল লোডার ফাংশনালিটি এবং WebGLRenderer, Camera, Scene সহ অন্যান্য মৌলিক সেটআপ প্রয়োজন।
১. Three.js এবং GLTFLoader ইনস্টল করা
আপনি যদি npm ব্যবহার করেন, তাহলে Three.js এবং GLTFLoader ইনস্টল করতে পারেন:
npm install three
npm install three/examples/js/loaders/GLTFLoader.js
যদি আপনি CDN ব্যবহার করেন, তবে Three.js এবং GLTFLoader ইনক্লুড করার জন্য নিচের কোড ব্যবহার করতে পারেন:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/loaders/GLTFLoader.js"></script>
২. Three.js-এ Model লোডিং কোড লিখুন
এখন, আমরা Three.js এর একটি বেসিক সেটআপ তৈরি করে এবং একটি .glTF মডেল লোড করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Model Loader</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 src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/examples/js/loaders/GLTFLoader.js"></script>
<script>
// ১. সীন, ক্যামেরা এবং রেন্ডারার সেটআপ
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);
// ২. GLTFLoader ব্যবহার করে মডেল লোড করা
var loader = new THREE.GLTFLoader();
loader.load(
'path/to/your/model.glb', // মডেল ফাইলের পাথ
function (gltf) {
scene.add(gltf.scene);
gltf.scene.scale.set(2, 2, 2); // মডেলটির আকার নিয়ন্ত্রণ করা
},
undefined,
function (error) {
console.error(error);
}
);
// ৩. লাইট অ্যাড করা (কোনও আলো না থাকলে 3D মডেল সঠিকভাবে দেখা যাবে না)
var light = new THREE.AmbientLight(0x404040, 1); // ধীর আলো
scene.add(light);
var directionalLight = new THREE.DirectionalLight(0xffffff, 1); // মূল আলো
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// ৪. ক্যামেরা পজিশন
camera.position.z = 5;
// ৫. রেন্ডারিং ফাংশন
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
এখানে কী ঘটছে:
- Scene তৈরি করা হচ্ছে এবং একটি PerspectiveCamera সেটআপ করা হচ্ছে যাতে 3D দৃশ্য দেখা যায়।
- WebGLRenderer এর মাধ্যমে 3D সীন রেন্ডার করা হচ্ছে।
- GLTFLoader ব্যবহার করে
.glTFফাইল লোড করা হচ্ছে এবং লোড সফল হলে সেই মডেল সীনে অ্যাড করা হচ্ছে। - Ambient Light এবং Directional Light দিয়ে দৃশ্যকে আলোকিত করা হচ্ছে, যাতে 3D মডেল ভালোভাবে দেখা যায়।
- animate() ফাংশন ব্যবহার করে 3D দৃশ্য রেন্ডারিং এবং ক্যামেরার মুভমেন্ট নিয়ন্ত্রণ করা হচ্ছে।
External Model লোড করার জন্য টিপস
- Model Format নির্বাচন:
.glTFহল আধুনিক 3D ফাইল ফরম্যাট এবং এটি তৃতীয় পক্ষের সফটওয়্যার দ্বারা সহজে তৈরি করা যায়। এটি সবচেয়ে বেশি ব্যবহৃত ফরম্যাট। এছাড়া.obj,.fbx,.stlফরম্যাটও Three.js সাপোর্ট করে। - টেক্সচার এবং ম্যাটেরিয়াল: মডেল লোড করার সময় টেক্সচার এবং ম্যাটেরিয়াল সঠিকভাবে লোড হচ্ছে কিনা তা নিশ্চিত করুন। যদি আপনি glTF ব্যবহার করেন, তবে টেক্সচার সাধারণত একই ফোল্ডারে রাখা হয়।
- মডেল স্কেলিং: অনেক সময় লোড হওয়া মডেল সঠিক আকারে না আসতে পারে, তাই আপনি
.scale.set(x, y, z)ব্যবহার করে মডেলের আকার নিয়ন্ত্রণ করতে পারেন। অ্যানিমেশন:
.glTFফাইলের মধ্যে অ্যানিমেশনও থাকে, সেগুলি লোড করার জন্য AnimationMixer ব্যবহার করা হয়।var mixer = new THREE.AnimationMixer(gltf.scene); gltf.animations.forEach((clip) => { mixer.clipAction(clip).play(); });
সারাংশ
Three.js এর মাধ্যমে External Models লোড করা একটি শক্তিশালী পদ্ধতি, যা আপনার ওয়েব অ্যাপ্লিকেশন বা গেমে 3D মডেল প্রদর্শন করতে সাহায্য করে। GLTFLoader ব্যবহার করে আপনি .glTF, .obj, .fbx ইত্যাদি ফরম্যাটের মডেল আপনার 3D দৃশ্যে যোগ করতে পারেন। এই টিউটোরিয়ালে আমরা দেখেছি কীভাবে একটি .glTF মডেল লোড করা হয় এবং সেটি 3D সীনে প্রদর্শন করা হয়।
Read more
