Geometries এবং Materials

Three.js কি?

Three.js হল একটি জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব ব্রাউজারে 3D গ্রাফিক্স এবং অ্যানিমেশন রেন্ডার করতে সাহায্য করে। এটি WebGL এর উপরে তৈরি এবং 3D গ্রাফিক্স তৈরি করতে একটি সহজ API সরবরাহ করে। Three.js এর মাধ্যমে আপনি 3D মডেল, দৃশ্য (scenes), আলোক ব্যবস্থা (lighting), ক্যামেরা, এবং অন্যান্য 3D উপাদান তৈরি করতে পারেন যা এক্সপ্লোর করতে সহজ এবং ইন্টারঅ্যাক্টিভ।

Geometries (জ্যামিতি)

Geometries হল 3D অবজেক্টের আকার নির্ধারণ করে। Three.js-এ বিভিন্ন ধরনের জ্যামিতি তৈরি করার জন্য বিভিন্ন ক্লাস উপলব্ধ রয়েছে। এগুলি সাধারণত পলিগনাল অবজেক্টের আকার ও গঠন নির্ধারণ করে, যেমন কিউব, স্ফিয়ার, প্লেন, টোরাস ইত্যাদি।

১. BoxGeometry (কিউব)

কিউব তৈরি করতে BoxGeometry ব্যবহার করা হয়। এটি একটি 3D কিউব তৈরি করে যার দৈর্ঘ্য, প্রস্থ এবং উচ্চতা নির্ধারণ করা যায়।

উদাহরণ:

const geometry = new THREE.BoxGeometry(1, 1, 1); // একক কিউব তৈরি
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

এখানে, BoxGeometry(1, 1, 1) দ্বারা একটি 1x1x1 কিউব তৈরি করা হয়েছে।

২. SphereGeometry (স্ফিয়ার)

SphereGeometry একটি গোলাকার অবজেক্ট তৈরি করতে ব্যবহৃত হয়। এটি একটি নির্দিষ্ট রেডিয়াস, স্তর এবং বিভাগের সংখ্যা সহ একটি স্ফিয়ার তৈরি করে।

উদাহরণ:

const geometry = new THREE.SphereGeometry(1, 32, 32); // রেডিয়াস ১, ৩২ স্তর এবং ৩২ বিভাগ সহ স্ফিয়ার
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

এখানে, SphereGeometry(1, 32, 32) দ্বারা একটি গোলাকার অবজেক্ট তৈরি করা হয়েছে।

৩. PlaneGeometry (প্লেন)

PlaneGeometry একটি সমতল পৃষ্ঠ (flat surface) তৈরি করতে ব্যবহৃত হয়। এটি একটি নির্দিষ্ট প্রস্থ এবং উচ্চতার সমতল তৈরি করে।

উদাহরণ:

const geometry = new THREE.PlaneGeometry(5, 5); // ৫x৫ পৃষ্ঠ তৈরি
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

এখানে, PlaneGeometry(5, 5) দ্বারা একটি ৫x৫ পৃষ্ঠ তৈরি করা হয়েছে।

৪. TorusGeometry (টোরাস)

TorusGeometry একটি টোরাস (donut-shaped object) তৈরি করতে ব্যবহৃত হয়।

উদাহরণ:

const geometry = new THREE.TorusGeometry(10, 3, 16, 100); // রেডিয়াস ১০, টিউব রেডিয়াস ৩, ১৬ বিভাগের টোরাস
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

এখানে, TorusGeometry(10, 3, 16, 100) দ্বারা একটি টোরাস তৈরি করা হয়েছে।

Materials (মেটেরিয়ালস)

Materials হল 3D অবজেক্টের পৃষ্ঠের উপাদান যা তাদের রঙ, প্রপার্টি, প্রতিফলন (reflection), এবং আলো গ্রহণের ক্ষমতা নির্ধারণ করে। Three.js এ বিভিন্ন ধরনের মেটেরিয়াল ক্লাস রয়েছে, যেমন MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial ইত্যাদি।

১. MeshBasicMaterial

MeshBasicMaterial একটি সাধারণ মেটেরিয়াল যা আলো এবং শ্যাডো (shadow) উপেক্ষা করে, শুধুমাত্র রঙ প্রদর্শন করে। এটি দ্রুত রেন্ডারিং প্রদান করে এবং সাধারণত কোনো আলো ব্যবহার না করার জন্য ব্যবহৃত হয়।

উদাহরণ:

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

এখানে, MeshBasicMaterial শুধুমাত্র কিউবের রঙ নির্ধারণ করে।

২. MeshLambertMaterial

MeshLambertMaterial একটি প্রাকৃতিক মেটেরিয়াল যা আলো গ্রহণের ক্ষমতা রাখে এবং এটি একটি ম্যাট (matte) ফিনিশ তৈরি করে।

উদাহরণ:

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

এখানে, Lambert Material তে আলো প্রভাবিত হবে এবং গ্লস (shine) ছাড়া ম্যাট ফিনিশে দৃশ্যমান হবে।

৩. MeshPhongMaterial

MeshPhongMaterial একটি গ্লসি (shiny) মেটেরিয়াল যা আলো এবং শ্যাডো (shadow) উভয়কে সিমুলেট করে এবং একটি specular highlight তৈরি করে।

উদাহরণ:

const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

এখানে, shininess: 100 গ্লসি এবং shiny ফিনিশ তৈরি করবে।

৪. MeshStandardMaterial

MeshStandardMaterial হল একটি PBR (Physically-Based Rendering) মেটেরিয়াল যা বাস্তব জীবনের উপাদানগুলোর মত দেখতে এবং চলতে সক্ষম। এটি বিশেষত উন্নত রেন্ডারিং টেকনিক্সে ব্যবহৃত হয়।

উদাহরণ:

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

এখানে, MeshStandardMaterial একটি বাস্তবসম্মত মেটেরিয়াল তৈরি করবে।

Geometries এবং Materials একত্রে ব্যবহার

Three.js এ Geometries এবং Materials একত্রে ব্যবহার করে 3D অবজেক্ট তৈরি করা হয়। উপরের উদাহরণগুলোতে Geometry এর আকার এবং Material এর গুণাবলী অনুযায়ী বিভিন্ন টেক্সচার এবং প্রভাব তৈরি করা হয়েছে।

উদাহরণ: কিউব তৈরির জন্য Geometry এবং Material একত্রিত করা

// কিউবের জন্য Geometry এবং Material তৈরি করা
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// কিউবটি scene এ যোগ করা
scene.add(cube);

এখানে, BoxGeometry এবং MeshBasicMaterial ব্যবহার করে একটি 3D কিউব তৈরি করা হয়েছে এবং এটি scene এ যোগ করা হয়েছে।

সারাংশ

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

Three.js এবং Pre-built Geometries

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

Pre-built Geometries হল এমন 3D অবজেক্ট যা Three.js সরবরাহ করে, এবং আপনি সহজেই এগুলি ব্যবহার করে জটিল 3D মডেল তৈরি করতে পারেন। Three.js বেশ কিছু সাধারণ geometries (যেমন Box, Sphere, Cone, Cylinder) সরবরাহ করে, যেগুলি দিয়ে আপনি সহজে 3D অবজেক্ট তৈরি করতে পারেন।

এই গাইডে, আমরা Pre-built Geometries (Box, Sphere, Cone, Cylinder) তৈরি করার উপায় দেখব।

১. Box Geometry

Box Geometry একটি সাধারণ সবার পরিচিত অবজেক্ট, যা একটি বাক্স বা কিউব তৈরি করে। এটি চারটি মাত্রা (width, height, depth) ব্যবহার করে একটি 3D বাক্স তৈরি করতে সাহায্য করে।

উদাহরণ:

// সিন প্লেন সেটআপ করা
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);

// BoxGeometry তৈরি করা
const geometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1 বাক্স
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // গ্রীন রঙের মেটিরিয়াল
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

// রেন্ডারিং এবং অ্যানিমেশন
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

এখানে, BoxGeometry ব্যবহার করে একটি সোজা বাক্স তৈরি করা হয়েছে, যা রোটেট হচ্ছে।

২. Sphere Geometry

Sphere Geometry একটি গোলাকার অবজেক্ট তৈরি করতে ব্যবহৃত হয়। এটি দুটি আর্গুমেন্ট (radius এবং width/height segments) গ্রহণ করে, যা গোলকের আকার এবং বিস্তারিত নির্ধারণ করে।

উদাহরণ:

// সিন প্লেন সেটআপ করা
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);

// SphereGeometry তৈরি করা
const geometry = new THREE.SphereGeometry(1, 32, 32); // গোলাকার অবজেক্ট, radius 1, 32 segments
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // ব্লু রঙের মেটিরিয়াল
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

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

// রেন্ডারিং এবং অ্যানিমেশন
function animate() {
    requestAnimationFrame(animate);
    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

এখানে, SphereGeometry দিয়ে একটি গোলাকার অবজেক্ট তৈরি করা হয়েছে, যা রোটেট হচ্ছে।

৩. Cone Geometry

Cone Geometry একটি শঙ্কু আকৃতির অবজেক্ট তৈরি করতে ব্যবহৃত হয়। এটি radius, height, এবং radialSegments এর মতো আর্গুমেন্ট নেয়।

উদাহরণ:

// সিন প্লেন সেটআপ করা
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);

// ConeGeometry তৈরি করা
const geometry = new THREE.ConeGeometry(1, 2, 32); // শঙ্কু, radius 1, height 2, 32 segments
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // রেড রঙের মেটিরিয়াল
const cone = new THREE.Mesh(geometry, material);
scene.add(cone);

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

// রেন্ডারিং এবং অ্যানিমেশন
function animate() {
    requestAnimationFrame(animate);
    cone.rotation.x += 0.01;
    cone.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

এখানে, ConeGeometry ব্যবহার করে একটি শঙ্কু তৈরি করা হয়েছে এবং সেটি রোটেট হচ্ছে।

৪. Cylinder Geometry

Cylinder Geometry একটি সিলিন্ডার আকৃতির অবজেক্ট তৈরি করতে ব্যবহৃত হয়। এটি radiusTop, radiusBottom, height, এবং radialSegments আর্গুমেন্ট নেয়।

উদাহরণ:

// সিন প্লেন সেটআপ করা
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);

// CylinderGeometry তৈরি করা
const geometry = new THREE.CylinderGeometry(1, 1, 2, 32); // সিলিন্ডার, radius 1, height 2, 32 segments
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // ইয়েলো রঙের মেটিরিয়াল
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

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

// রেন্ডারিং এবং অ্যানিমেশন
function animate() {
    requestAnimationFrame(animate);
    cylinder.rotation.x += 0.01;
    cylinder.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

এখানে, CylinderGeometry দিয়ে একটি সিলিন্ডার তৈরি করা হয়েছে, যা রোটেট হচ্ছে।

সারাংশ

Three.js এর Pre-built Geometries (Box, Sphere, Cone, Cylinder) হল এমন টুলস যা আপনাকে সহজে 3D অবজেক্ট তৈরি করতে সহায়তা করে। আপনি সহজে এই Geometries ব্যবহার করে বিভিন্ন 3D শেপ তৈরি করতে পারেন এবং সেগুলির উপর অ্যানিমেশন, রোটেশন, এবং অন্যান্য ইন্টারেকটিভ অপারেশন প্রয়োগ করতে পারেন। Three.js আপনার ওয়েব অ্যাপ্লিকেশনকে 3D গ্রাফিক্সের মাধ্যমে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।

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 যোগ করে রিয়ালিস্টিক লুক পেতে পারেন এবং প্যারামেট্রিক জ্যামিতি তৈরি করে বিভিন্ন আকারের শেপ তৈরি করতে সক্ষম হন।

Three.js এবং Materials

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

Materials হল এমন উপাদান যা 3D অবজেক্টের পৃষ্ঠতলে প্রয়োগ করা হয় এবং তাদের রেন্ডারিং প্রক্রিয়া নির্ধারণ করে। Three.js এ বিভিন্ন ধরনের Materials রয়েছে যা আলোর সাথে প্রতিক্রিয়া, পৃষ্ঠের রুক্ষতা, উজ্জ্বলতা ইত্যাদি নিয়ন্ত্রণ করতে সাহায্য করে।

এখানে আমরা Basic, Standard, Lambert, এবং Phong নামক চারটি গুরুত্বপূর্ণ Material এর সম্পর্কে আলোচনা করব এবং বুঝব কোন পরিস্থিতিতে কোনটি ব্যবহার করা উচিত।

১. Basic Material

Basic Material হল একটি সহজ এবং দ্রুততম material যা কোন আলোর প্রভাব গ্রহণ করে না। এটি শুধুমাত্র সঠিক টেক্সচার এবং রঙ প্রদর্শন করে। আলোর প্রভাব বা শ্যাডো প্রক্রিয়ার জন্য এটি উপযুক্ত নয়, তবে দ্রুত রেন্ডারিং এবং সরল বৈশিষ্ট্যের জন্য এটি ব্যবহার করা হয়।

বিশেষত্ব:

• কোন আলোর প্রভাব নেই।
• সরল রঙ এবং টেক্সচার প্রদর্শন করে।
• দ্রুত রেন্ডারিং।

ব্যবহার:

Basic Material সাধারণত এমন কেসে ব্যবহার করা হয় যেখানে আপনি শুধুমাত্র সোজা রঙ এবং টেক্সচার প্রদর্শন করতে চান, যেমন UI এলিমেন্ট, আইকন, বা এমন কোন বস্তু যা আলোর প্রভাব বা শ্যাডো গ্রহণ করতে হয় না।

উদাহরণ:

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

এখানে, একটি MeshBasicMaterial তৈরি করা হয়েছে যা রঙ হিসেবে লাল (0xff0000) প্রদর্শন করবে।

২. Lambert Material

Lambert Material হল একটি matte বা diffuse material যা আলোর সাথে প্রতিক্রিয়া দেখায়। এটি বাস্তবিক দৃশ্যের জন্য উপযুক্ত কারণ এটি আলোর প্রতিফলন ও ছায়া তৈরি করে। Lambert material সূর্যের আলো বা অন্য কোন স্থির আলোতে আসা একটি বস্তুতে খুবই কার্যকর।

বিশেষত্ব:

• আলোর সাথে প্রতিক্রিয়া করে, তবে শাইনিং বা গ্লোসির মতো উজ্জ্বলতা নেই।
• বাস্তবিক, ম্যাট বা ডিফিউজড সাপোর্ট প্রদান করে।
• রুক্ষ পৃষ্ঠের জন্য আদর্শ।

ব্যবহার:

Lambert Material সাধারণত matte surfaces বা সেইসব বস্তুতে ব্যবহার করা হয় যেখানে আলোর প্রতিফলন প্রাকৃতিকভাবে প্রভাবিত হয় এবং একাধিক আলো বা গ্লোস্টি ইফেক্ট প্রয়োজন হয় না।

উদাহরণ:

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

এখানে, MeshLambertMaterial তৈরি করা হয়েছে যা সবুজ রঙের একটি ম্যাট ফিনিশ ডিসপ্লে করবে এবং আলোতে এটি প্রতিফলিত হবে।

৩. Phong Material

Phong Material হল এমন একটি shiny material যা আলোর প্রতিফলন ও সিমুলেশন করে। এটি specular reflection বা shiny highlights তৈরি করতে সক্ষম। Phong materialটি সবচেয়ে বেশি ব্যবহৃত হয় যখন কোন বস্তুতে উজ্জ্বলতা এবং শাইনিং ইফেক্ট প্রদর্শন করতে হয়।

বিশেষত্ব:

• আলোর প্রতিফলন এবং শাইনিং ইফেক্ট।
• বাস্তবিক উজ্জ্বল পৃষ্ঠ প্রদর্শন করে।
• specular highlights এবং shininess সহকারে ব্যবহৃত হয়।

ব্যবহার:

Phong Material সাধারণত ধাতব, গ্লসি অথবা উজ্জ্বল বস্তুতে ব্যবহৃত হয়, যেমন ধাতু, জল, কাচ, বা অন্যান্য শাইনিং বা স্পষ্ট পৃষ্ঠ।

উদাহরণ:

const material = new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 });

এখানে, MeshPhongMaterial তৈরি করা হয়েছে, যা নীল রঙের এবং একটি উজ্জ্বল স্পেকুলার ইফেক্ট দেখাবে।

৪. Standard Material

Standard Material হল physically-based rendering (PBR) এর জন্য ডিজাইন করা একটি material যা অধিকতর বাস্তবিক দৃষ্টিকোণ তৈরি করতে সাহায্য করে। এটি metalness এবং roughness এর মতো বৈশিষ্ট্যগুলির মাধ্যমে একটি বস্তুতে আলোর প্রতিফলন নির্ধারণ করে। Standard Material বাস্তব পৃথিবীর আলোর পরিবেশের মতো প্রতিক্রিয়া দেখাতে সক্ষম, তাই এটি সাধারণত realistic rendering-এ ব্যবহৃত হয়।

বিশেষত্ব:

• PBR (Physically-Based Rendering) সাপোর্ট করে।
• metalness এবং roughness বৈশিষ্ট্য দ্বারা আলোর প্রতিফলন নির্ধারণ করা হয়।
• বাস্তবিক আলোর প্রতিক্রিয়া প্রদান করে।

ব্যবহার:

Standard Material সাধারণত realistic 3D scenes, বিশেষ করে যেখানে আলোর প্রতিক্রিয়া এবং ভিন্ন ভিন্ন উপকরণের বৈশিষ্ট্য দরকার, সেখানে ব্যবহৃত হয়।

উদাহরণ:

const material = new THREE.MeshStandardMaterial({ color: 0x777777, metalness: 0.5, roughness: 0.1 });

এখানে, MeshStandardMaterial তৈরি করা হয়েছে যা বাস্তবিক আলো এবং পৃষ্ঠের পরিপ্রেক্ষিতে metalness এবং roughness নিয়ন্ত্রণ করবে।

সারাংশ

Three.js-এ Materials হল 3D অবজেক্টের প্রধান উপাদান যা তাদের পৃষ্ঠতল, আলোর সাথে প্রতিক্রিয়া এবং শেডিং নির্ধারণ করে। নিচে আমরা Materials এর গুরুত্বপূর্ণ প্রকারভেদ নিয়ে আলোচনা করেছি:

1. Basic Material: আলোর প্রভাব থেকে মুক্ত, সরল রঙ প্রদর্শন করে।
2. Lambert Material: ডিফিউজড বা ম্যাট সাপোর্ট প্রদান করে, যা আলোর সাথে প্রতিক্রিয়া করে।
3. Phong Material: শাইনিং বা গ্লসি পৃষ্ঠের জন্য ব্যবহৃত, যা আলোর প্রতিফলন এবং হাইলাইট দেখায়।
4. Standard Material: PBR (Physically-Based Rendering) সাপোর্ট করে এবং বাস্তবিক আলোর প্রতিক্রিয়া প্রদান করে।

Material নির্বাচন করার সময় আপনাকে আপনার 3D দৃশ্যের ধরণ এবং প্রয়োজন অনুযায়ী এগুলির মধ্যে থেকে সঠিকটি বেছে নিতে হবে।

Three.js এর সাথে Materials এবং Textures

Three.js হল একটি শক্তিশালী JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। Three.js গ্রাফিক্সের বিভিন্ন উপাদান যেমন Meshes, Materials, Lights, Cameras ইত্যাদি নিয়ে কাজ করতে সহায়তা করে। Materials হল 3D অবজেক্টের সেই অংশ যা অবজেক্টের বাইরের চেহারা এবং বৈশিষ্ট্য নির্ধারণ করে, এবং Textures হল সেই ইমেজ যা এই materials-কে সাজানোর জন্য ব্যবহার করা হয়।

Textures এবং Images ব্যবহার করে আপনি materials কাস্টমাইজ করতে পারেন এবং অবজেক্টগুলিকে আরও বাস্তবসম্মত এবং দৃষ্টিনন্দন করে তুলতে পারেন।

Textures এবং Materials এর মধ্যে সম্পর্ক

Materials তিনটি প্রধান উপাদান নিয়ে গঠিত:

1. Color: একটি সলিড রঙ।
2. Texture: একটি ইমেজ বা প্যাটার্ন যা object's surface-এ প্রয়োগ করা হয়।
3. Properties: যেমন শাইন, ট্রান্সপারেন্সি ইত্যাদি, যা object's appearance কে আরও বৈচিত্র্যময় করে তোলে।

Textures আসলে একটি 2D ইমেজ ফাইল (JPEG, PNG, GIF ইত্যাদি) যা একটি Material এর উপর প্রয়োগ করা হয়। এটি ব্যবহার করে আপনি আরও জটিল এবং বাস্তবসম্মত লুক তৈরি করতে পারেন, যেমন ইমেজ ম্যাপিং, ডিজাইন, ওয়াটার, গ্লাস, রফিং ইত্যাদি।

Three.js এ Textures এবং Images ব্যবহার করে Materials কাস্টমাইজ করা

১. TextureLoader ব্যবহার করে Texture লোড করা

Three.js এ ইমেজ টেক্সচার লোড করতে TextureLoader ক্লাস ব্যবহার করা হয়। এটি একটি ইমেজ ফাইল লোড করে এবং সেই ইমেজটিকে Material এর একটি অংশ হিসেবে ব্যবহার করতে সহায়তা করে।

উদাহরণ:

// Scene তৈরি করা
const scene = new THREE.Scene();

// Camera তৈরি করা
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Renderer তৈরি করা
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Cube geometry তৈরি করা
const geometry = new THREE.BoxGeometry();

// TextureLoader ব্যবহার করে texture লোড করা
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/texture.jpg');

// Material তৈরি করা এবং texture প্রয়োগ করা
const material = new THREE.MeshBasicMaterial({ map: texture });

// Mesh তৈরি করা এবং scene এ যোগ করা
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Camera এর অবস্থান সেট করা
camera.position.z = 5;

// Animation loop তৈরি করা
function animate() {
  requestAnimationFrame(animate);

  // Cube কে রোটেট করা
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

// Animation শুরু করা
animate();

এখানে, TextureLoader ব্যবহার করে একটি ইমেজ ফাইল লোড করা হয়েছে এবং MeshBasicMaterial এর মাধ্যমে সেটি Cube এর উপরে প্রয়োগ করা হয়েছে।

২. Different Types of Materials ব্যবহার করা

Three.js-এ বেশ কিছু ধরনের Materials রয়েছে, যেমন:

• MeshBasicMaterial: কোন লাইটের প্রয়োজন হয় না এবং এই মেটেরিয়ালটি সোজা রঙ অথবা টেক্সচার ব্যবহার করতে পারে।
• MeshLambertMaterial: লাইটের সাথে কাজ করে এবং গোলমাল (diffuse) লাইটিং প্রদান করে।
• MeshPhongMaterial: প্রোপার শাইন (specular) এবং রিফ্লেকশন (reflection) যোগ করে, এটি Glossy বা Shiny লুক তৈরি করতে ব্যবহৃত হয়।

এখন, আপনি MeshLambertMaterial ব্যবহার করতে পারেন, যা লাইটের সাথে টেক্সচার সমন্বিত করে।

উদাহরণ:

// Material তৈরি করা এবং texture প্রয়োগ করা
const material = new THREE.MeshLambertMaterial({ map: texture });

// Scene এ একটি লাইট যোগ করা
const light = new THREE.PointLight(0xffffff);
light.position.set(10, 10, 10);
scene.add(light);

এখানে, MeshLambertMaterial ব্যবহার করে লাইটের সাথে কাজ করার জন্য টেক্সচার যুক্ত করা হয়েছে।

৩. Normal Map এবং Bump Map ব্যবহার করা

কখনো কখনো, শুধু texture এর মাধ্যমে অবজেক্টের surface-এর বিশদ প্রদান করা যথেষ্ট নয়। এ ক্ষেত্রে Normal Map এবং Bump Map ব্যবহার করা হয়। এগুলি টেক্সচারের উপরে গভীরতা এবং বিস্তারিত সৃষ্টি করতে সাহায্য করে, যা সীমানা, সিল, পাথরের মতো টেক্সচার তৈরি করতে ব্যবহৃত হয়।

• Normal Map: 3D অবজেক্টের টেক্সচারের উপর depth এবং বাম্পি চেহারা যুক্ত করে, যা লাইটিং এবং শেডিং কনট্রাস্ট তৈরি করতে সহায়ক।
• Bump Map: এটি কিছুটা সাধারণ এবং texture এর উপর সিলিকন বা পাথরের মতো গভীরতা যোগ করে।

উদাহরণ:

// Normal map লোড করা
const normalMap = textureLoader.load('path/to/your/normalmap.jpg');

// Bump map লোড করা
const bumpMap = textureLoader.load('path/to/your/bumpmap.jpg');

// Material তৈরি করা এবং Normal ও Bump map প্রয়োগ করা
const material = new THREE.MeshPhongMaterial({
  map: texture,
  normalMap: normalMap,
  bumpMap: bumpMap,
  bumpScale: 0.1
});

এখানে, NormalMap এবং BumpMap ব্যবহার করে আরো বিস্তারিত এবং realistic effect তৈরি করা হয়েছে।

৪. Reflective এবং Transparent Materials

Reflective materials তৈরির জন্য MeshStandardMaterial ব্যবহার করা হয়, যেখানে আপনি বিভিন্ন রিফ্লেকশন এবং ট্রান্সপারেন্সি প্রোপার্টি কনফিগার করতে পারেন।

উদাহরণ:

const material = new THREE.MeshStandardMaterial({
  color: 0x555555,
  metalness: 0.5,
  roughness: 0.1,
  envMap: reflectionTexture, // Reflection texture
  transparent: true,
  opacity: 0.8  // Set transparency
});

এখানে, MeshStandardMaterial দিয়ে একটি reflective এবং transparent material তৈরি করা হয়েছে।

সারাংশ

Three.js এ Textures এবং Images ব্যবহার করে Materials কাস্টমাইজ করা খুবই শক্তিশালী এবং বাস্তবসম্মত গ্রাফিক্স তৈরি করার জন্য উপকারী। আপনি TextureLoader ব্যবহার করে সহজেই টেক্সচার লোড করতে পারেন এবং বিভিন্ন ধরনের Materials যেমন MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial ব্যবহার করে আপনার 3D অবজেক্টগুলির আউটপুট কাস্টমাইজ করতে পারেন। Normal Maps, Bump Maps, Reflective Materials এবং Transparent Materials এর মতো উন্নত ফিচার ব্যবহার করে আপনি অবজেক্টগুলির বিস্তারিত এবং বাস্তবসম্মত চেহারা তৈরি করতে পারেন। Three.js এ টেক্সচার এবং মেটেরিয়াল ব্যবহারের মাধ্যমে, আপনি অত্যন্ত আকর্ষণীয় এবং ইন্টারেক্টিভ 3D দৃশ্য তৈরি করতে পারবেন।