Three.js এর সাথে 3D মডেল ফরম্যাট
Three.js একটি JavaScript লাইব্রেরি যা ওয়েব ব্রাউজারে 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করতে ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে, যা ব্রাউজারে 3D কন্টেন্ট রেন্ডার করতে সহায়তা করে। থ্রি.জেএস-এ 3D মডেল ইম্পোর্ট করার জন্য বিভিন্ন ধরনের ফাইল ফরম্যাট ব্যবহার করা যেতে পারে, যার মধ্যে OBJ, FBX, এবং GLTF বেশ জনপ্রিয়।
এখানে আমরা এই তিনটি ফরম্যাট সম্পর্কে বিস্তারিত আলোচনা করব এবং থ্রি.জেএস-এ এগুলি কীভাবে ব্যবহার করা হয় তা দেখাবো।
১. OBJ ফরম্যাট
OBJ ফরম্যাট হল একটি জনপ্রিয় 3D মডেল ফাইল ফরম্যাট যা খুব সহজ এবং সাধারণভাবে ব্যবহৃত হয়। এটি একটি টেক্সট ভিত্তিক ফাইল ফরম্যাট এবং 3D মডেলগুলোর জ্যামিতিক তথ্য (পয়েন্ট, পলিগন, টেক্সচার কোঅর্ডিনেট ইত্যাদি) ধারণ করে। এটি খুবই সাধারণ এবং অনেক সফটওয়্যার দ্বারা সমর্থিত।
উপকারিতা:
- খুব সহজ এবং সাধারণ ফরম্যাট।
- টেক্সচার এবং মেটালিয়াল তথ্য ধারণ করতে পারে।
- অনেক 3D সফটওয়্যার যেমন Blender, Maya, 3DS Max ইত্যাদির সাথে সামঞ্জস্যপূর্ণ।
থ্রি.জেএস-এ OBJ ইম্পোর্ট করা:
Three.js-এ OBJ ফাইল লোড করার জন্য OBJLoader ব্যবহার করা হয়। নিচে এর উদাহরণ দেওয়া হলো:
// Three.js ও OBJLoader লোড করা
import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
// Scene সেটআপ
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);
// OBJLoader দিয়ে 3D মডেল লোড করা
const loader = new OBJLoader();
loader.load('model.obj', (object) => {
scene.add(object);
object.position.set(0, 0, 0);
});
// লাইট সেটআপ
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// রেন্ডারিং ফাংশন
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
এখানে OBJLoader ব্যবহার করে একটি OBJ ফাইল লোড করা হয়েছে এবং থ্রি.জেএস সীন-এ এটি যোগ করা হয়েছে।
২. FBX ফরম্যাট
FBX (Filmbox) একটি শক্তিশালী 3D ফরম্যাট যা অ্যানিমেশন, জ্যামিতিক তথ্য, এবং মেটালিয়াল/টেক্সচার সংরক্ষণ করতে সক্ষম। এটি অ্যাডোবি, ম্যাক্সন, এবং অন্যান্য 3D সফটওয়্যার দ্বারা সমর্থিত এবং অনেক উন্নত বৈশিষ্ট্য প্রদান করে।
উপকারিতা:
- অ্যানিমেশন, স্কেল, রোটেশন, এবং টেক্সচারসহ সম্পূর্ণ 3D ডেটা ধারণ করতে সক্ষম।
- ফাইলের মধ্যে একাধিক 3D অবজেক্ট থাকতে পারে।
- সাধারণত গেমস এবং সিনেমা ইন্ডাস্ট্রিতে ব্যবহৃত হয়।
থ্রি.জেএস-এ FBX ইম্পোর্ট করা:
FBX ফাইল লোড করতে FBXLoader ব্যবহার করা হয়। নিচে এর উদাহরণ দেওয়া হলো:
// Three.js ও FBXLoader লোড করা
import * as THREE from 'three';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
// Scene সেটআপ
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);
// FBXLoader দিয়ে 3D মডেল লোড করা
const loader = new FBXLoader();
loader.load('model.fbx', (object) => {
scene.add(object);
object.position.set(0, 0, 0);
});
// লাইট সেটআপ
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// রেন্ডারিং ফাংশন
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
এখানে FBXLoader ব্যবহার করে একটি FBX ফাইল লোড করা হয়েছে এবং সীন-এ এটি যোগ করা হয়েছে।
৩. GLTF ফরম্যাট
GLTF (GL Transmission Format) একটি আধুনিক 3D ফাইল ফরম্যাট যা কমপ্যাক্ট এবং দ্রুত লোড করার জন্য ডিজাইন করা হয়েছে। এটি JSON ভিত্তিক এবং টেক্সচার, মেটালিয়াল, অ্যানিমেশন, স্কেল, রোটেশন ইত্যাদি তথ্য ধারণ করতে পারে। এটি ওয়েবের জন্য আদর্শ, কারণ এটি দ্রুত লোড হয় এবং ব্রাউজারে ভালোভাবে কাজ করে।
উপকারিতা:
- দ্রুত লোডিং এবং কমপ্যাক্ট ফাইল সাইজ।
- আধুনিক 3D ফাইল ফরম্যাট হিসেবে প্রচলিত।
- গেম এবং ওয়েব অ্যাপ্লিকেশনগুলোর জন্য আদর্শ।
থ্রি.জেএস-এ GLTF ইম্পোর্ট করা:
GLTF ফাইল লোড করতে GLTFLoader ব্যবহার করা হয়। নিচে এর উদাহরণ দেওয়া হলো:
// Three.js ও GLTFLoader লোড করা
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// Scene সেটআপ
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);
// GLTFLoader দিয়ে 3D মডেল লোড করা
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
scene.add(gltf.scene);
gltf.scene.position.set(0, 0, 0);
});
// লাইট সেটআপ
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// রেন্ডারিং ফাংশন
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
এখানে GLTFLoader ব্যবহার করে একটি GLTF ফাইল লোড করা হয়েছে এবং থ্রি.জেএস সীন-এ এটি যোগ করা হয়েছে। GLTF ফাইলটি ওয়েবের জন্য অত্যন্ত উপযোগী, কারণ এটি দ্রুত লোড হয় এবং কমপ্যাক্ট।
সারাংশ
Three.js ব্যবহার করে 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করার জন্য বিভিন্ন ধরনের 3D মডেল ফরম্যাট ব্যবহার করা যায়। OBJ, FBX, এবং GLTF তিনটি প্রধান 3D ফরম্যাট যা ওয়েব ডেভেলপমেন্টে ব্যবহার করা হয়।
- OBJ হল একটি সহজ এবং জনপ্রিয় ফরম্যাট, তবে এটি অ্যানিমেশন সমর্থন করে না।
- FBX ফরম্যাট অ্যানিমেশন সহ সম্পূর্ণ 3D মডেল ধারণ করতে পারে এবং বৃহৎ প্রজেক্টে ব্যবহৃত হয়।
- GLTF হল একটি আধুনিক এবং দ্রুত লোড হওয়ার জন্য ডিজাইন করা ফরম্যাট, যা ওয়েব অ্যাপ্লিকেশনের জন্য আদর্শ।
Three.js-এ এগুলির সবকটিই সহজে ইম্পোর্ট এবং রেন্ডার করা যায়, এবং প্রতিটি ফরম্যাটের উপকারিতা অনুযায়ী ব্যবহার করা যেতে পারে। GLTF বর্তমানে সবচেয়ে কার্যকরী এবং আধুনিক ফরম্যাট হিসেবে পরিচিত, বিশেষত ওয়েব অ্যাপ্লিকেশনের জন্য।
Read more
