PointsMaterial এবং PointsGeometry ব্যবহার

Three.js এবং PointsMaterial/PointsGeometry

Three.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব ব্রাউজারে 3D গ্রাফিক্স এবং ভিজ্যুয়াল ইফেক্ট তৈরি করতে ব্যবহৃত হয়। এটি একটি হালকা এবং দ্রুত লাইব্রেরি যা সহজেই 3D গ্রাফিক্স ইন্টিগ্রেট করতে সহায়তা করে, বিশেষ করে ওয়েব অ্যাপ্লিকেশন বা গেম ডেভেলপমেন্টের জন্য। Three.js বিভিন্ন ধরনের জ্যামিতি (Geometry) এবং ম্যাটেরিয়াল সরবরাহ করে, যার মধ্যে PointsGeometry এবং PointsMaterial দুটি বিশেষ জিনিস যা 3D স্পট বা পয়েন্ট তৈরি করতে ব্যবহৃত হয়।

• PointsGeometry: পয়েন্টের একটি সিরিজ তৈরি করার জন্য ব্যবহার করা হয়। এটি মূলত একটি জ্যামিতি যা পয়েন্টের অবস্থান নির্ধারণ করে।
• PointsMaterial: এই ম্যাটেরিয়াল পয়েন্টগুলি কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে, যেমন তাদের রঙ, আকার ইত্যাদি।

PointsMaterial এবং PointsGeometry এর মধ্যে সম্পর্ক

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

১. PointsGeometry ব্যবহার করা

PointsGeometry একটি ধরনের Geometry যা পয়েন্টগুলির একটি স collection তৈরি করে। এটি পয়েন্টের অবস্থান এবং ডেটা ধারণ করে।

উদাহরণ: PointsGeometry ব্যবহার করে একটি পয়েন্ট ক্লাউড তৈরি করা

// Three.js সেটআপ
import * as THREE from 'three';

// Scene, camera, renderer তৈরি করা
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 geometry = new THREE.Geometry();

// পয়েন্টের অবস্থান যুক্ত করা (যেমন, ১০০টি পয়েন্ট)
for (let i = 0; i < 100; i++) {
  const x = Math.random() * 500 - 250;  // র‍্যান্ডম X
  const y = Math.random() * 500 - 250;  // র‍্যান্ডম Y
  const z = Math.random() * 500 - 250;  // র‍্যান্ডম Z
  geometry.vertices.push(new THREE.Vector3(x, y, z));  // পয়েন্টের অবস্থান নির্ধারণ
}

// পয়েন্ট ক্লাউড তৈরি করা
const material = new THREE.PointsMaterial({ color: 0x888888, size: 3 });
const points = new THREE.Points(geometry, material);

// দৃশ্যে পয়েন্ট ক্লাউড যোগ করা
scene.add(points);

// ক্যামেরার অবস্থান সেট করা
camera.position.z = 500;

// রেন্ডার ফাংশন
function animate() {
  requestAnimationFrame(animate);

  // পয়েন্ট ক্লাউডের ওপর অ্যানিমেশন প্রয়োগ (রোটেশন)
  points.rotation.x += 0.01;
  points.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

এই কোডে, PointsGeometry ব্যবহার করে ১০০টি র‍্যান্ডম পয়েন্ট তৈরি করা হয়েছে এবং PointsMaterial দিয়ে তাদের রঙ এবং আকার নির্ধারণ করা হয়েছে। তারপর, পয়েন্টগুলিকে একটি 3D দৃশ্যে যোগ করা হয়েছে এবং একটি অ্যানিমেশন তৈরি করা হয়েছে যাতে পয়েন্ট ক্লাউডটি ধীরে ধীরে রোটেট হয়।

২. PointsMaterial ব্যবহার করা

PointsMaterial হল সেই ম্যাটেরিয়াল যা পয়েন্টগুলির ভিজ্যুয়াল প্রোপার্টি নির্ধারণ করে, যেমন রঙ, আকার, এবং স্বচ্ছতা।

উদাহরণ: PointsMaterial এর মাধ্যমে পয়েন্টগুলির আকার ও রঙ নির্ধারণ করা

// পয়েন্টের জন্য ম্যাটেরিয়াল তৈরি
const material = new THREE.PointsMaterial({
  color: 0x00ff00,  // সব পয়েন্টের জন্য সবুজ রঙ
  size: 5,          // পয়েন্টের আকার
  opacity: 0.7,     // স্বচ্ছতা
  transparent: true // স্বচ্ছতা সক্রিয়
});

এখানে, PointsMaterial ব্যবহার করে পয়েন্টগুলির রঙ (color), আকার (size), এবং স্বচ্ছতা (opacity) সেট করা হয়েছে। transparent: true মানে পয়েন্টগুলোতে কিছুটা স্বচ্ছতা থাকবে।

৩. PointsMaterial এবং PointsGeometry একত্রে ব্যবহার

কিভাবে PointsGeometry এবং PointsMaterial একসাথে ব্যবহার করা যায় তা আমরা নিচের উদাহরণে দেখব:

import * as THREE from 'three';

// Scene, camera, renderer তৈরি করা
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);

// PointsGeometry তৈরি করা
const geometry = new THREE.Geometry();
for (let i = 0; i < 100; i++) {
  const x = Math.random() * 500 - 250;
  const y = Math.random() * 500 - 250;
  const z = Math.random() * 500 - 250;
  geometry.vertices.push(new THREE.Vector3(x, y, z));
}

// PointsMaterial তৈরি করা
const material = new THREE.PointsMaterial({
  color: 0x00ff00,  // সবুজ রঙ
  size: 3,          // আকার ৩
  opacity: 0.8,     // স্বচ্ছতা ০.৮
  transparent: true // স্বচ্ছ
});

// পয়েন্ট ক্লাউড তৈরি করা
const points = new THREE.Points(geometry, material);

// দৃশ্যে পয়েন্ট ক্লাউড যোগ করা
scene.add(points);

// ক্যামেরার অবস্থান
camera.position.z = 500;

// রেন্ডার ফাংশন
function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}
animate();

এই উদাহরণে, PointsGeometry এবং PointsMaterial একত্রে ব্যবহার করে একটি 3D পয়েন্ট ক্লাউড তৈরি করা হয়েছে। আমরা এখানে পয়েন্টগুলির রঙ, আকার এবং স্বচ্ছতা কাস্টমাইজ করেছি।

সারাংশ

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