Scene, Camera এবং Renderer এর ভূমিকা

Three.js কি?

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

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

Scene, Camera এবং Renderer: Three.js এর মৌলিক উপাদান

Three.js এর 3D দৃশ্য তৈরি করার জন্য তিনটি মূল উপাদান রয়েছে: Scene, Camera, এবং Renderer। এগুলি একটি 3D দৃশ্য তৈরি এবং প্রদর্শন করতে একে অপরের সাথে কাজ করে।

১. Scene

Scene হল Three.js-এ একটি 3D পরিবেশ বা "দৃশ্য" তৈরি করার জায়গা। এটি সমস্ত 3D অবজেক্ট, লাইট, ক্যামেরা এবং অন্যান্য উপাদান ধারণ করে। Scene এর মাধ্যমে আপনি কোন 3D অবজেক্ট কোথায় এবং কিভাবে দৃশ্যে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে পারবেন। এটি সেই ভৌগলিক স্থান যেখানে আপনি সকল 3D মডেল, পদ্ধতি এবং অন্যান্য গ্রাফিক্স উপাদানগুলো সংযুক্ত করবেন।

Scene এর উদাহরণ:

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

// একটি বক্স জ্যামিতি তৈরি
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);

এখানে, scene.add(cube) কোডটি cube অবজেক্টকে scene এ যুক্ত করেছে, যা পরবর্তীতে ক্যামেরা এবং রেন্ডারারের মাধ্যমে প্রদর্শিত হবে।

২. Camera

Camera হলো সেই ডিভাইস যা 3D সীনের দৃশ্য দেখে এবং সেই দৃশ্য ব্রাউজারে প্রদর্শন করার জন্য রেন্ডার করে। এটি viewpoint (ভিউপয়েন্ট) প্রদান করে, অর্থাৎ আপনি কোন দিক থেকে সীনের অবজেক্টগুলো দেখতে চান তা নিয়ন্ত্রণ করে। Three.js এ সাধারণত দুটি ধরনের ক্যামেরা ব্যবহৃত হয়:

• Perspective Camera: এটি বাস্তবিক দৃশ্যের মতো পরিপ্রেক্ষিত প্রদর্শন করে।
• Orthographic Camera: এটি সোজা এবং সমতল দৃশ্য প্রদান করে, যেটিতে দূরত্বের প্রভাব থাকে না।

Camera এর উদাহরণ:

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

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

এখানে, new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) কোডটি 75 ডিগ্রি ভিউ অ্যাঙ্গেল সহ একটি perspective camera তৈরি করছে এবং camera.position.z = 5 ক্যামেরার অবস্থান নির্ধারণ করছে।

৩. Renderer

Renderer হল সেই উপাদান যা 3D সীনের ভিউ রেন্ডার করে এবং এটি ব্রাউজারে প্রদর্শন করে। Three.js এ প্রধানত WebGLRenderer ব্যবহৃত হয়, যা WebGL-এর মাধ্যমে 3D কন্টেন্ট ব্রাউজারে দ্রুত রেন্ডার করতে সহায়তা করে। Renderer ব্রাউজারের একটি <canvas> উপাদানে রেন্ডার আউটপুট দেয়।

Renderer এর উদাহরণ:

// WebGLRenderer তৈরি করা
const renderer = new THREE.WebGLRenderer();

// রেন্ডারার এর সাইজ সেট করা
renderer.setSize(window.innerWidth, window.innerHeight);

// HTML ডকুমেন্টে canvas যুক্ত করা
document.body.appendChild(renderer.domElement);

এখানে, renderer.setSize(window.innerWidth, window.innerHeight) কোডটি রেন্ডারারের আউটপুট সাইজ সেট করেছে, যাতে এটি ব্রাউজারের উইন্ডোর আকার অনুযায়ী কনটেন্ট রেন্ডার করতে পারে। renderer.domElement HTML ডকুমেন্টে রেন্ডারারের <canvas> উপাদান অ্যাপেন্ড (সংযুক্ত) করা হয়েছে।

৪. Scene, Camera এবং Renderer একত্রে ব্যবহারের উদাহরণ

এখন, আমরা Scene, Camera, এবং Renderer একত্রে ব্যবহার করে একটি সাধারণ 3D দৃশ্য তৈরি করব। এখানে একটি 3D কিউব তৈরি করা হবে যা ক্যামেরার মাধ্যমে দেখা যাবে এবং রেন্ডার হবে।

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

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

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

// 4. একটি Cube তৈরি করা
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);

// 5. Animation Loop
function animate() {
  requestAnimationFrame(animate);

  // Cube ঘুরানো
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // রেন্ডারিং
  renderer.render(scene, camera);
}

// এনিমেশন শুরু করা
animate();

এই উদাহরণে:

• Scene তৈরি করা হয়েছে যেখানে cube যোগ করা হয়েছে।
• Camera তৈরি করা হয়েছে এবং সেটি 5 ইউনিট দূরত্বে ক্যামেরা পজিশন করা হয়েছে।
• Renderer সেটআপ করা হয়েছে এবং এটি ওয়েব পেজে <canvas> উপাদান হিসেবে অ্যাড করা হয়েছে।
• Animation Loop তৈরি করা হয়েছে, যাতে কিউবটি ঘুরতে থাকে এবং সীনের মধ্যে রেন্ডার হয়।

সারাংশ

Three.js-এ Scene, Camera, এবং Renderer তিনটি মৌলিক উপাদান যা 3D গ্রাফিক্স তৈরি এবং প্রদর্শনের জন্য অপরিহার্য।

• Scene হল 3D দৃশ্য তৈরি করার জায়গা যেখানে 3D অবজেক্ট, লাইট, এবং অন্যান্য উপাদান রাখা হয়।
• Camera হল সেই ডিভাইস যা দৃশ্যটি দেখবে এবং তা প্রদর্শন করবে।
• Renderer হল সেই উপাদান যা সেই দৃশ্যটি WebGL এর মাধ্যমে রেন্ডার করে এবং <canvas> উপাদানে দেখায়।

এই তিনটি উপাদান একত্রে কাজ করে 3D গ্রাফিক্সের একটি পূর্ণাঙ্গ পরিবেশ তৈরি করতে সহায়তা করে, যা ওয়েব ব্রাউজারে ইন্টারঅ্যাকটিভ 3D কন্টেন্ট দেখাতে সক্ষম।