GLTFLoader, OBJLoader, এবং FBXLoader এর ব্যবহার

Three.js কি?

Three.js একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি WebGL-এর উপরে তৈরি এবং ব্রাউজারে রেন্ডারিং, 3D মডেলস, এনিমেশন এবং ইন্টারঅ্যাকটিভ গ্রাফিক্সের জন্য সহজ উপায় সরবরাহ করে। Three.js ব্যবহার করে আপনি ওয়েব ব্রাউজারে 3D কন্টেন্ট দেখাতে পারেন, যেমন গেম, সিমুলেশন, ভিজুয়ালাইজেশন ইত্যাদি।

GLTFLoader, OBJLoader, এবং FBXLoader: ব্যবহারের প্রয়োজনীয়তা

Three.js আপনাকে বিভিন্ন 3D ফাইল ফর্ম্যাট (যেমন GLTF, OBJ, FBX) লোড করার জন্য বিভিন্ন লোডার প্রদান করে। এই ফাইল ফর্ম্যাটগুলি 3D মডেল, টেক্সচার, অ্যানিমেশন এবং অন্যান্য ডেটা ধারণ করে। আপনাকে যখন 3D কনটেন্ট ওয়েবপেজে লোড করতে হবে, তখন এই লোডারগুলো অত্যন্ত কার্যকরী হয়ে ওঠে।

GLTFLoader

GLTF (GL Transmission Format) হল একটি মডার্ন এবং জনপ্রিয় 3D ফাইল ফর্ম্যাট, যা 3D কনটেন্টের দ্রুত লোডিং নিশ্চিত করে এবং বিভিন্ন প্ল্যাটফর্মে সমর্থিত। GLTFLoader হল Three.js এর একটি লোডার যা .gltf বা .glb ফাইল ফর্ম্যাট লোড করতে ব্যবহৃত হয়।

GLTF এর কিছু গুরুত্বপূর্ণ সুবিধা:

• দ্রুত লোডিং
• একক ফাইল হিসেবে 3D মডেল, টেক্সচার, অ্যানিমেশন সমর্থন
• ব্রাউজারের জন্য আদর্শ (WebGL সমর্থিত)

GLTFLoader উদাহরণ:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/js/loaders/GLTFLoader';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new GLTFLoader();
loader.load('path_to_model/model.gltf', function (gltf) {
  scene.add(gltf.scene);
  gltf.animations; // array of animations
  gltf.scene.scale.set(2, 2, 2);
}, undefined, function (error) {
  console.error(error);
});

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

এখানে, GLTFLoader ব্যবহার করে .gltf ফাইল লোড করা হয়েছে এবং সেটি Three.js সীনে যোগ করা হয়েছে।

OBJLoader

OBJ ফাইল ফর্ম্যাট একটি পুরনো এবং সাধারণ 3D মডেল ফর্ম্যাট, যা টেক্সচার এবং ভেক্টর তথ্য ধারণ করে। OBJLoader হল Three.js এর একটি লোডার যা .obj ফাইল লোড করতে ব্যবহৃত হয়। এটি সাধারণত ছোট এবং সহজ মডেলগুলির জন্য ব্যবহৃত হয়।

OBJLoader উদাহরণ:

import * as THREE from 'three';
import { OBJLoader } from 'three/examples/js/loaders/OBJLoader';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new OBJLoader();
loader.load('path_to_model/model.obj', function (object) {
  scene.add(object);
  object.scale.set(2, 2, 2);
}, undefined, function (error) {
  console.error(error);
});

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

এখানে, OBJLoader ব্যবহার করে .obj ফাইল লোড করা হয়েছে এবং সেটি Three.js সীনে যোগ করা হয়েছে। এটি সহজ 3D মডেল লোড করার জন্য ব্যবহার করা হয়।

FBXLoader

FBX হল একটি ফাইল ফর্ম্যাট যা অটোক্যাড এবং অন্যান্য 3D সফটওয়্যারে ব্যাপকভাবে ব্যবহৃত হয়। FBXLoader হল Three.js এর একটি লোডার যা .fbx ফাইল ফর্ম্যাট লোড করতে ব্যবহৃত হয়। এই ফাইল ফর্ম্যাটটি উচ্চ মানের অ্যানিমেশন এবং জটিল 3D মডেল সমর্থন করে।

FBXLoader উদাহরণ:

import * as THREE from 'three';
import { FBXLoader } from 'three/examples/js/loaders/FBXLoader';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new FBXLoader();
loader.load('path_to_model/model.fbx', function (object) {
  scene.add(object);
  object.scale.set(2, 2, 2);
}, undefined, function (error) {
  console.error(error);
});

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

এখানে, FBXLoader ব্যবহার করে .fbx ফাইল লোড করা হয়েছে এবং সেটি Three.js সীনে যোগ করা হয়েছে। FBX ফাইল ফর্ম্যাটের মাধ্যমে আপনি অ্যানিমেটেড 3D মডেল সহজে লোড এবং রেন্ডার করতে পারেন।

GLTFLoader, OBJLoader, এবং FBXLoader এর মধ্যে পার্থক্য

সারাংশ

Three.js এর মধ্যে GLTFLoader, OBJLoader, এবং FBXLoader গুরুত্বপূর্ণ টুলস যা 3D মডেল এবং অ্যানিমেশন লোড করতে ব্যবহৃত হয়। GLTFLoader আধুনিক এবং দ্রুত লোডযোগ্য ফাইল ফর্ম্যাটের জন্য ব্যবহৃত হয়, OBJLoader সহজ মডেল লোড করার জন্য উপযোগী, এবং FBXLoader জটিল অ্যানিমেশন এবং মডেলগুলির জন্য ব্যবহৃত হয়। এই লোডারগুলো ব্যবহার করে আপনি সহজেই ব্রাউজারে 3D কন্টেন্ট লোড এবং প্রদর্শন করতে পারবেন।