Loading External Models

Three.js এবং External Models

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

এটি সাধারণত 3D মডেল লোড করার জন্য ব্যবহৃত হয়, যা ভিন্ন ভিন্ন ফরম্যাটে (যেমন .obj, .fbx, .glTF ইত্যাদি) ডাটা গ্রহণ করতে সক্ষম। 3D মডেল লোড করার সময় Three.js আপনাকে বিভিন্ন ফাইল ফরম্যাট এবং তাদের প্যারামিটারগুলি সঠিকভাবে লোড করতে সাহায্য করে, যাতে আপনার 3D অভিজ্ঞতা দ্রুত এবং ইফেক্টিভ হয়।

External Models লোড করার প্রয়োজনীয়তা

External models, যেমন 3D মডেল ফাইল, glTF বা OBJ ফাইল, অনেক সময় ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটে প্রিভিউ এবং রেন্ডারিং এর জন্য ব্যবহার করা হয়। এই মডেলগুলো সাধারণত বিভিন্ন ডিজাইন টুলস বা সফটওয়্যার থেকে তৈরি হয়, যেমন Blender, 3D Studio Max, অথবা Maya। আপনি যদি কোনো 3D প্রজেক্ট তৈরি করতে চান, তবে এই মডেলগুলো ওয়েবসাইটে সঠিকভাবে লোড এবং রেন্ডার করা অত্যন্ত গুরুত্বপূর্ণ।

External Models লোড করার জন্য Three.js এ ব্যবহার করা কিছু ফাংশন

Three.js এ মডেল লোড করার জন্য বেশ কিছু পদ্ধতি রয়েছে, যেগুলির মধ্যে glTF, OBJ, FBX ফাইল ফরম্যাটের জন্য আলাদা আলাদা লোডার রয়েছে।

১. glTF মডেল লোড করা

glTF (GL Transmission Format) হলো একটি কম্প্যাক্ট এবং কার্যকরী 3D মডেল ফরম্যাট যা ওয়েবের জন্য ডিজাইন করা হয়েছে। এটি উচ্চমানের 3D গ্রাফিক্স এবং রেন্ডারিং জন্য অধিক কার্যকরী, কারণ এটি অত্যন্ত কমপ্যাক্ট এবং দ্রুত লোড হতে সক্ষম।

Three.js এ glTF ফাইল লোড করার জন্য GLTFLoader ব্যবহার করা হয়।

glTF ফাইল লোডিং উদাহরণ:

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

// Scene setup
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);

// Load the glTF model
const loader = new GLTFLoader();
loader.load('path_to_model/model.glb', function (gltf) {
  scene.add(gltf.scene);  // Add the model to the scene
}, undefined, function (error) {
  console.error(error);
});

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

এখানে, GLTFLoader ব্যবহার করে model.glb ফাইলটি ওয়েব পেজে লোড করা হচ্ছে এবং এটি scene-এ যোগ করা হচ্ছে। আপনি অন্য 3D মডেল ফরম্যাটও এইভাবে লোড করতে পারেন।

২. OBJ মডেল লোড করা

OBJ ফাইল একটি সাধারণ 3D মডেল ফরম্যাট, যা একাধিক 3D সফটওয়্যার দ্বারা সমর্থিত। OBJLoader ব্যবহার করে এই ধরনের মডেল লোড করা হয়।

OBJ ফাইল লোডিং উদাহরণ:

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

// Scene setup
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);

// Load the OBJ model
const loader = new OBJLoader();
loader.load('path_to_model/model.obj', function (object) {
  scene.add(object);  // Add the model to the scene
}, undefined, function (error) {
  console.error(error);
});

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

এখানে, OBJLoader ব্যবহার করা হচ্ছে model.obj ফাইল লোড করার জন্য এবং এটি scene-এ যোগ করা হচ্ছে।

৩. FBX মডেল লোড করা

FBX ফাইল একটি শক্তিশালী 3D ফরম্যাট যা এনিমেশন এবং আরও জটিল 3D ডেটা ধারণ করে। Three.js এ FBXLoader ব্যবহার করে FBX ফাইল লোড করা হয়।

FBX ফাইল লোডিং উদাহরণ:

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

// Scene setup
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);

// Load the FBX model
const loader = new FBXLoader();
loader.load('path_to_model/model.fbx', function (object) {
  scene.add(object);  // Add the model to the scene
}, undefined, function (error) {
  console.error(error);
});

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

এখানে, FBXLoader ব্যবহার করে model.fbx ফাইলটি লোড হচ্ছে এবং 3D সেকেন্ডে রেন্ডার হচ্ছে।

মডেল লোডিংয়ের কৌশল

১. লোডিং প্রগ্রেস শো করা

মডেল লোডিং দীর্ঘ সময় নিতে পারে, তাই লোডিংয়ের সময় ইউজারের জন্য একটি প্রগ্রেস বার বা স্পিনার শো করা ভাল ধারণা হতে পারে।

const loader = new GLTFLoader();
const progressBar = document.getElementById('progress-bar');

loader.load(
  'path_to_model/model.glb',
  function(gltf) {
    scene.add(gltf.scene);
  },
  function(xhr) {
    progressBar.value = (xhr.loaded / xhr.total) * 100;  // Show loading progress
  },
  function(error) {
    console.error(error);
  }
);

২. লোডিং শেষ হলে আনিমেশন শুরু করা

মডেল লোড হয়ে গেলে, আপনি আপনার ওয়েব পেজে বিভিন্ন অ্যানিমেশন বা অন্যান্য কার্যকলাপ শুরু করতে পারেন।

loader.load('path_to_model/model.glb', function(gltf) {
  scene.add(gltf.scene);

  // Start animation
  animateModel(gltf.scene);
});

৩. লাইভ রেন্ডারিং ও রিয়েলটাইম আপডেট

আপনি যখন মডেল লোড করেন, তখন rendering সিস্টেমে লাইভ আপডেট করা হয়ে থাকে, যেখানে প্রতিটি ফ্রেমে মডেলটি নতুনভাবে রেন্ডার করা হয়।

সারাংশ

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

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 বর্তমানে সবচেয়ে কার্যকরী এবং আধুনিক ফরম্যাট হিসেবে পরিচিত, বিশেষত ওয়েব অ্যাপ্লিকেশনের জন্য।

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>

এখানে কী ঘটছে:

1. Scene তৈরি করা হচ্ছে এবং একটি PerspectiveCamera সেটআপ করা হচ্ছে যাতে 3D দৃশ্য দেখা যায়।
2. WebGLRenderer এর মাধ্যমে 3D সীন রেন্ডার করা হচ্ছে।
3. GLTFLoader ব্যবহার করে .glTF ফাইল লোড করা হচ্ছে এবং লোড সফল হলে সেই মডেল সীনে অ্যাড করা হচ্ছে।
4. Ambient Light এবং Directional Light দিয়ে দৃশ্যকে আলোকিত করা হচ্ছে, যাতে 3D মডেল ভালোভাবে দেখা যায়।
5. animate() ফাংশন ব্যবহার করে 3D দৃশ্য রেন্ডারিং এবং ক্যামেরার মুভমেন্ট নিয়ন্ত্রণ করা হচ্ছে।

External Model লোড করার জন্য টিপস

1. Model Format নির্বাচন: .glTF হল আধুনিক 3D ফাইল ফরম্যাট এবং এটি তৃতীয় পক্ষের সফটওয়্যার দ্বারা সহজে তৈরি করা যায়। এটি সবচেয়ে বেশি ব্যবহৃত ফরম্যাট। এছাড়া .obj, .fbx, .stl ফরম্যাটও Three.js সাপোর্ট করে।
2. টেক্সচার এবং ম্যাটেরিয়াল: মডেল লোড করার সময় টেক্সচার এবং ম্যাটেরিয়াল সঠিকভাবে লোড হচ্ছে কিনা তা নিশ্চিত করুন। যদি আপনি glTF ব্যবহার করেন, তবে টেক্সচার সাধারণত একই ফোল্ডারে রাখা হয়।
3. মডেল স্কেলিং: অনেক সময় লোড হওয়া মডেল সঠিক আকারে না আসতে পারে, তাই আপনি .scale.set(x, y, z) ব্যবহার করে মডেলের আকার নিয়ন্ত্রণ করতে পারেন।

4. অ্যানিমেশন: .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 সীনে প্রদর্শন করা হয়।

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 কন্টেন্ট লোড এবং প্রদর্শন করতে পারবেন।

Three.js এবং Performance Optimization

Three.js হল একটি শক্তিশালী 3D JavaScript লাইব্রেরি যা ব্রাউজারে 3D গ্রাফিক্স এবং ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। তবে, যখন 3D মডেল বা গ্রাফিক্সের পরিমাণ বাড়তে থাকে, তখন পারফরম্যান্স একটি বড় চ্যালেঞ্জ হয়ে দাঁড়ায়। সঠিক অপটিমাইজেশন না করলে, আপনার ওয়েব অ্যাপ্লিকেশনটি ধীর হয়ে যেতে পারে, বিশেষ করে কম ক্ষমতাসম্পন্ন ডিভাইসে।

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

১. মডেল অপটিমাইজেশন

১.১. Polycount কমানো (Reducing Polycount)

একটি 3D মডেলের polygon count (polycount) বা triangle count যখন খুব বেশি হয়, তখন তা রেন্ডারিং পারফরম্যান্সের উপর নেতিবাচক প্রভাব ফেলতে পারে। উচ্চ polycount মডেলগুলো সাধারণত বেশি GPU শক্তি এবং সময় নেন।

• LOD (Level of Detail) ব্যবহার করুন: একে LOD বা Level of Detail বলা হয়, যেখানে আপনি দূরবর্তী অবজেক্টের জন্য কম ডিটেইল মডেল ব্যবহার করেন এবং কাছাকাছি অবজেক্টের জন্য উচ্চ ডিটেইল মডেল ব্যবহার করেন।
• Subdivide বা Decimate করুন: 3D মডেল তৈরির সময় আপনার মডেলটি যতটা সম্ভব কম polygon এর হতে চেষ্টা করুন। Subdivide বা Decimate টুল ব্যবহার করে অপ্রয়োজনীয় triangles বা polygons সরিয়ে ফেলতে পারেন।
• Bake Texture: Complex geometry বা high-poly মডেলগুলোতে texture baking ব্যবহার করুন, যার মাধ্যমে আপনি কম polycount মডেল ব্যবহার করেও উচ্চ মানের দেখাতে পারেন।

১.২. Texture Optimization

টেক্সচারগুলি বড় হলে এবং তাদের রেজলিউশন বেশি হলে, তা রেন্ডারিং সময় বাড়িয়ে দেয়। তাছাড়া, ভারী টেক্সচারগুলি একাধিক উপাদান প্রক্রিয়া করতে পারে।

• Texture Compression: টেক্সচারগুলো কম্প্রেস করে তাদের সাইজ ছোট করা যেতে পারে। আপনি JPEG বা PNG টেক্সচার কম্প্রেশন ব্যবহার করতে পারেন, তবে DDS বা KTX কম্প্রেশন ফরম্যাটে টেক্সচার ব্যবহার করলে পারফরম্যান্স আরও উন্নত হবে।
• Lower Resolution Textures: দূরবর্তী অবজেক্টগুলির জন্য উচ্চ রেজলিউশন টেক্সচার ব্যবহার না করে, তাদের ছোট রেজলিউশন ব্যবহার করুন।
• Texture Atlas: একাধিক টেক্সচারকে একটি একক টেক্সচারে (texture atlas) সংযুক্ত করা গেলে, গেম বা 3D অ্যাপ্লিকেশনের জন্য draw calls কমানো যায়।

১.৩. Geometry Instancing

Instancing হল একাধিক কপি তৈরির প্রক্রিয়া যেখানে একই জ্যামিতি বা মডেল বিভিন্ন জায়গায় ব্যবহার করা হয়। এতে ডেটা রেন্ডারিং কমিয়ে ফেলা হয় এবং পারফরম্যান্স বৃদ্ধি পায়।

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.InstancedMesh(geometry, material, 1000);

scene.add(mesh);

এখানে, InstancedMesh ব্যবহার করে একসাথে এক হাজার বক্স মডেল রেন্ডার করা হয়েছে। এটি একই মডেল বার বার রেন্ডার করতে সহায়তা করে, যার ফলে পারফরম্যান্স ভালো হয়।

২. রেন্ডারিং পারফরম্যান্স কনসিডারেশন

২.১. Frustum Culling

Frustum culling হল এমন একটি কৌশল যা ক্যামেরার দৃশ্যের বাইরে থাকা অবজেক্টগুলোকে রেন্ডারিং করার প্রয়োজন পড়ে না। যখন কোনো অবজেক্ট ক্যামেরার দৃশ্যের বাইরে চলে যায়, তখন তা রেন্ডার করা বন্ধ করে দেওয়া হয়।

Three.js এ Frustum Culling স্বয়ংক্রিয়ভাবে সক্রিয় থাকে। তবে, আপনি চাইলে নিজে এটিকে কাস্টমাইজ করতে পারেন:

object.frustumCulled = false;

এটি নির্দিষ্ট অবজেক্টের জন্য frustum culling বন্ধ করে দেবে।

২.২. Shadow Optimization

Shadows একটি 3D পরিবেশের গুরুত্বপূর্ণ অংশ, তবে এগুলি রেন্ডারিং পারফরম্যান্সে বিরূপ প্রভাব ফেলতে পারে। তাই, শ্যাডো ব্যবহারের ক্ষেত্রে কিছু অপটিমাইজেশন প্রয়োজন।

• Shadow Resolution কমানো: শ্যাডো রেজলিউশন কমানো সম্ভব হলে পারফরম্যান্সে উন্নতি হয়।
• Cascaded Shadow Maps: আপনি Cascaded Shadow Maps (CSM) ব্যবহার করতে পারেন, যা বিভিন্ন দূরত্বের জন্য বিভিন্ন রেজলিউশন শ্যাডো প্রদান করে, এবং এটি ফ্রেমরেট উন্নত করতে সাহায্য করে।

২.৩. Antialiasing

Antialiasing হল একটি টেকনিক যা স্কয়ার পিক্সেলগুলির সীমানাকে মসৃণ করতে ব্যবহার করা হয়, তবে এটি কিছুটা অতিরিক্ত প্রসেসিং পাওয়ার ব্যবহার করে।

Three.js এ, antialiasing সক্রিয় করা হয় যখন আপনি WebGLRenderer তৈরি করেন:

const renderer = new THREE.WebGLRenderer({ antialias: true });

তবে, এটি পারফরম্যান্সে কিছুটা প্রভাব ফেলতে পারে, বিশেষ করে কম ক্ষমতাসম্পন্ন ডিভাইসে।

২.৪. Use of Efficient Materials

ম্যাটেরিয়ালগুলির পছন্দ পারফরম্যান্সের উপর প্রভাব ফেলে। খুব বেশি প্যারামিটার বা শেডার ব্যবহার না করাই ভালো।

• MeshBasicMaterial ব্যবহার করা, কারণ এটি কোনো লাইটিং প্রক্রিয়া ছাড়াই দ্রুত রেন্ডার হয়।
• Phong, Lambert, or Standard shaders ব্যবহার করলে তাদের বিভিন্ন অপটিমাইজড ভার্সন ব্যবহার করতে পারেন।

৩. ব্রাউজার এবং ডিভাইস পারফরম্যান্স কনসিডারেশন

৩.১. WebGL 2.0

WebGL 2.0 একটি উচ্চ পারফরম্যান্স API, যা WebGL 1.0 এর তুলনায় অনেক বেশি দক্ষ। এটি গ্রাফিক্সের জন্য বিভিন্ন নতুন ফিচার সরবরাহ করে, যেমন multiple render targets, instanced rendering, এবং আরও অনেক কিছু। যদি আপনার ব্রাউজার এটি সাপোর্ট করে, তবে এটি ব্যবহৃত হতে পারে।

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.capabilities.isWebGL2 = true;

৩.২. Optimize for Mobile

মোবাইল ডিভাইসগুলির গ্রাফিক্স ক্ষমতা কম থাকে, তাই সেগুলোর জন্য অপটিমাইজেশন বেশি জরুরি। আপনি low-poly models, smaller textures, এবং simplified shaders ব্যবহার করতে পারেন।

• WebGL statistics ট্র্যাক করা এবং মোবাইল ডিভাইসে ব্যবহারের জন্য পারফরম্যান্সের টিউনিং করা।
• Reduce Draw Calls: অনেক ছোট ছোট অবজেক্টের পরিবর্তে, একত্রে একটি বড় অবজেক্ট তৈরি করা।

সারাংশ

Three.js ব্যবহার করার সময় model optimization এবং performance considerations অত্যন্ত গুরুত্বপূর্ণ। উচ্চ polycount মডেল এবং ভারী টেক্সচার পারফরম্যান্সের ওপর খারাপ প্রভাব ফেলতে পারে, তবে সেগুলিকে কমিয়ে, LOD, texture compression, instancing, এবং frustum culling এর মতো কৌশলগুলি প্রয়োগ করলে পারফরম্যান্সের উন্নতি সম্ভব। এছাড়া, শ্যাডো অপটিমাইজেশন, efficient materials, এবং WebGL 2.0 ব্যবহার করে পারফরম্যান্স আরও ভালো করা যেতে পারে। ব্রাউজার এবং ডিভাইসের ক্ষমতা অনুযায়ী প্যারামিটার কনফিগারেশন করা এবং mobile optimization এর দিকে মনোযোগ দিয়ে আপনি একটি কার্যকরী এবং দ্রুত ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।