Custom Geometry তৈরি করা

Three.js এবং Custom Geometry

Three.js হল একটি শক্তিশালী JavaScript লাইব্রেরি যা ব্রাউজারে 3D গ্রাফিক্স তৈরি করতে সাহায্য করে। এটি WebGL-এর উপর ভিত্তি করে কাজ করে এবং 3D গ্রাফিক্স তৈরির জন্য প্রয়োজনীয় সব ফিচার সরবরাহ করে। Custom Geometry হল এমন একটি ফিচার যা আপনাকে আপনার নিজস্ব 3D অবজেক্ট তৈরি করতে সাহায্য করে, যার মধ্যে আপনি বিভিন্ন ধরনের জ্যামিতি (geometry) এবং শেপ তৈরি করতে পারেন, যেমন বক্স, স্ফিয়ার, বা যেকোনো বিশেষ আকৃতি।

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

Custom Geometry তৈরি করার পদ্ধতি

Three.js এ Custom Geometry তৈরি করার জন্য THREE.BufferGeometry এবং THREE.Float32BufferAttribute ব্যবহার করা হয়। এর মাধ্যমে আপনি পয়েন্ট, ফেস এবং ভেক্টরগুলো নিজের প্রয়োজন অনুসারে কাস্টমাইজ করতে পারেন।

১. Basic Structure of Custom Geometry

Three.js এ একটি কাস্টম জ্যামিতি তৈরি করতে, আপনি প্রথমে একটি BufferGeometry অবজেক্ট তৈরি করবেন এবং তারপর এতে কাস্টম vertices (পয়েন্ট), faces (ফেস) এবং normals (নর্মাল ভেক্টর) অ্যাড করবেন।

সাধারণ উদাহরণ:

// Three.js 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);

// Custom Geometry setup
const geometry = new THREE.BufferGeometry();

// Define vertices (points in 3D space)
const vertices = new Float32Array([
  0, 1, 0,    // Vertex 1 (X, Y, Z)
  -1, -1, 1,  // Vertex 2
  1, -1, 1    // Vertex 3
]);

// Add vertices to geometry
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// Define a simple material and mesh
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const customMesh = new THREE.Mesh(geometry, material);

// Add the mesh to the scene
scene.add(customMesh);

// Position the camera
camera.position.z = 5;

// Animation loop
function animate() {
  requestAnimationFrame(animate);

  customMesh.rotation.x += 0.01;
  customMesh.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

এই উদাহরণে, আমরা BufferGeometry ব্যবহার করে একটি Custom Geometry তৈরি করেছি, যা একটি triangle এর তিনটি পয়েন্টের মধ্যে একটি ফেস তৈরি করে। এই ফেসটির জন্য আমরা vertices অ্যারে ব্যবহার করেছি।

২. Multiple Faces and Custom Shapes

এখন, যদি আপনি একাধিক ফেস তৈরি করতে চান বা একটি কাস্টম শেপ বানাতে চান, তাহলে vertices এবং faces আরও জটিলভাবে তৈরি করতে হবে। আপনাকে faces তৈরি করতে হবে যেগুলি নির্দিষ্ট vertices এর সংমিশ্রণ হবে।

উদাহরণ:

const geometry = new THREE.BufferGeometry();

// Define vertices for a cube (8 vertices)
const vertices = new Float32Array([
  -1, -1, -1,  1, -1, -1,  1,  1, -1,  -1,  1, -1,  // Front face
  -1, -1,  1,  1, -1,  1,  1,  1,  1,  -1,  1,  1,  // Back face
  // Add more vertices for the other faces...
]);

geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// Define faces (indices of the vertices)
const indices = new Uint16Array([
  0, 1, 2,  0, 2, 3,   // Front face
  4, 5, 6,  4, 6, 7,   // Back face
  // Add more indices for the other faces...
]);

geometry.setIndex(new THREE.BufferAttribute(indices, 1));

// Define normals for shading
const normals = new Float32Array([
  0, 0, -1,  0, 0, -1,  0, 0, -1,  0, 0, -1,   // Normals for front face
  0, 0, 1,   0, 0, 1,   0, 0, 1,   0, 0, 1,    // Normals for back face
  // Add more normals...
]);

geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));

// Create mesh with the custom geometry
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const customMesh = new THREE.Mesh(geometry, material);

// Add the mesh to the scene
scene.add(customMesh);

এখানে, একটি Cube তৈরি করতে আমরা ৮টি vertices এবং তাদের মধ্যে faces তৈরি করেছি। প্রতিটি ফেসের জন্য আমরা indices ব্যবহার করেছি, যা vertices গুলিকে সংযুক্ত করবে। Normals যোগ করা হয়েছে যাতে lighting শেডিং সঠিকভাবে কাজ করে।

৩. Custom Geometry with Parameters

আপনি যদি কাস্টম জ্যামিতি তৈরি করতে চান যা প্যারামিটারাইজড, তাহলে আপনি function ব্যবহার করতে পারেন যাতে ডাইনামিকভাবে বিভিন্ন শেপ তৈরি করা যায়।

উদাহরণ: Custom Parametric Geometry (Cylinder)

function createCylinder(radius, height) {
  const geometry = new THREE.BufferGeometry();
  
  const vertices = [];
  const segments = 32;
  
  // Create the vertices for the cylinder
  for (let i = 0; i < segments; i++) {
    const angle = (i / segments) * 2 * Math.PI;
    const x = radius * Math.cos(angle);
    const z = radius * Math.sin(angle);
    const y = height / 2;
    vertices.push(x, -y, z, x, y, z); // top and bottom vertices
  }

  geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));

  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cylinder = new THREE.Mesh(geometry, material);
  
  return cylinder;
}

// Create and add the custom cylinder to the scene
const cylinder = createCylinder(1, 3);
scene.add(cylinder);

এখানে একটি Cylinder তৈরি করা হয়েছে যেটি radius এবং height প্যারামিটার দিয়ে কাস্টমাইজ করা যায়। এটি একটি কাস্টম প্যারামেট্রিক জ্যামিতি তৈরি করার উদাহরণ।

৪. Adding Texture to Custom Geometry

আপনি আপনার কাস্টম জ্যামিতিতে texture যোগ করতে পারেন, যা আপনার 3D অবজেক্টকে আরও রিয়ালিস্টিক দেখতে সাহায্য করে।

উদাহরণ:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path_to_your_texture.jpg');

// Apply texture to custom geometry
const material = new THREE.MeshBasicMaterial({ map: texture });
const customMesh = new THREE.Mesh(geometry, material);

scene.add(customMesh);

এখানে, TextureLoader ব্যবহার করে একটি টেক্সচার লোড করা হয়েছে এবং তারপর সেটি কাস্টম জ্যামিতিতে প্রয়োগ করা হয়েছে।

সারাংশ

Three.js এর মাধ্যমে আপনি Custom Geometry তৈরি করতে পারেন যা আপনার প্রকল্পে প্রয়োজনীয় কোনো কাস্টম শেপ বা ডাইনামিক 3D অবজেক্ট তৈরি করতে সাহায্য করে। আপনি BufferGeometry ব্যবহার করে জ্যামিতি কাস্টমাইজ করতে পারেন, vertices, faces, normals ইত্যাদি কাস্টমাইজ করে আপনার ইচ্ছেমত শেপ তৈরি করতে পারেন। এই জ্যামিতিগুলিতে texture যোগ করে রিয়ালিস্টিক লুক পেতে পারেন এবং প্যারামেট্রিক জ্যামিতি তৈরি করে বিভিন্ন আকারের শেপ তৈরি করতে সক্ষম হন।