Three.js কি?
Three.js হল একটি ওপেন সোর্স JavaScript লাইব্রেরি যা WebGL (Web Graphics Library) এর উপর ভিত্তি করে 3D গ্রাফিক্স তৈরির জন্য ব্যবহৃত হয়। এটি সহজে ব্রাউজারে 3D কন্টেন্ট প্রদর্শন করতে সহায়ক এবং আপনি কম্পিউটার গ্রাফিক্স, এনিমেশন, গেমস, ডেটা ভিজ্যুয়ালাইজেশন ইত্যাদি তৈরি করতে পারেন। Three.js একটি শক্তিশালী লাইব্রেরি যা জাভাস্ক্রিপ্ট ডেভেলপারদের 3D গ্রাফিক্সের জন্য জটিল কনফিগারেশন ছাড়া সহজভাবে কাজ করার সুযোগ দেয়।
Three.js এর মূল বৈশিষ্ট্য
- WebGL এর ওপর ভিত্তি করে কাজ: Three.js মূলত WebGL এর ওপর ভিত্তি করে তৈরি। WebGL হল ব্রাউজারে হার্ডওয়্যার এক্সটেনশন সহ গ্রাফিক্স রেন্ডারিং এর একটি API, যা জাভাস্ক্রিপ্ট ব্যবহার করে 3D গ্রাফিক্স তৈরি করতে সক্ষম। Three.js WebGL এর জটিলতা লুকিয়ে রেখে একটি সহজ এবং সোজা API প্রদান করে।
- সহজ সিনট্যাক্স: Three.js ব্যবহার করার জন্য জটিল WebGL কোড লেখার প্রয়োজন পড়ে না। এর সহজ সিনট্যাক্সের মাধ্যমে জাভাস্ক্রিপ্ট ডেভেলপাররা খুব দ্রুত 3D সিন তৈরি করতে পারেন।
- বিভিন্ন রেন্ডারার: Three.js বিভিন্ন রেন্ডারিং ইঞ্জিন সাপোর্ট করে যেমন WebGLRenderer, CanvasRenderer, এবং SVGRenderer, যা গ্রাফিক্সের মান এবং পারফরম্যান্সের উপর ভিত্তি করে ব্যবহার করা যায়।
- ক্যামেরা এবং লাইটিং: Three.js এ ক্যামেরা এবং লাইটিং পরিচালনা সহজ। আপনি PerspectiveCamera বা OrthographicCamera ব্যবহার করে দৃশ্য দেখাতে পারেন এবং বিভিন্ন ধরনের লাইট (যেমন, AmbientLight, PointLight, DirectionalLight) দিয়ে দৃশ্য আলোকিত করতে পারেন।
- এনিমেশন সাপোর্ট: Three.js দিয়ে আপনি স্কেল, রোটেশন, পজিশন ইত্যাদি এনিমেট করতে পারেন এবং এটি সরলভাবে কাজ করে। এর এনিমেশন সিস্টেম
requestAnimationFrame()এর মাধ্যমে কাজ করে, যা এক frame থেকে অন্য frame পর্যন্ত এনিমেশন চক্র চালিয়ে নিয়ে যায়। - ডাটা ভিজ্যুয়ালাইজেশন: Three.js খুব সহজেই ডাটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারে, যেমন থ্রি-ডি গ্রাফস, ডায়াগ্রামস, চার্টস ইত্যাদি, যা ডেটাকে আরো কার্যকরভাবে উপস্থাপন করতে সাহায্য করে।
- বিভিন্ন ধরনের 3D অবজেক্টস: Three.js বিভিন্ন ধরনের 3D অবজেক্ট যেমন Cube, Sphere, Cylinder, Cone ইত্যাদি তৈরি করতে সহায়তা করে এবং সেই সাথে কাস্টম 3D অবজেক্ট তৈরি করতে সাহায্য করে।
Three.js এর সাধারণ ব্যবহার
Three.js দিয়ে আপনি সহজেই অনেক ধরনের 3D অ্যাপ্লিকেশন তৈরি করতে পারেন, যেমন:
- 3D গেমস: আপনি Three.js ব্যবহার করে ব্রাউজার-বেসড 3D গেমস তৈরি করতে পারেন, যা ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় হবে।
- 3D ভিজ্যুয়ালাইজেশন: Three.js দিয়ে আপনি বড় ডেটাসেটস বা গ্রাফিক্সগুলোর 3D ভিজ্যুয়াল তৈরি করতে পারেন, যা বিভিন্ন ইন্ডাস্ট্রি যেমন স্বাস্থ্যসেবা, প্রযুক্তি, বিজ্ঞান, ইঞ্জিনিয়ারিং ইত্যাদির জন্য অত্যন্ত কার্যকরী হতে পারে।
- 3D ইউজার ইন্টারফেস: Three.js দিয়ে 3D ইউজার ইন্টারফেস তৈরি করতে পারেন, যেখানে ইউজাররা ইন্টারঅ্যাকটিভভাবে 3D কন্টেন্ট নিয়ে কাজ করতে পারে।
- ভিজ্যুয়াল আর্ট এবং অ্যানিমেশন: আপনি Three.js দিয়ে আকর্ষণীয় গ্রাফিক্স এবং 3D অ্যানিমেশন তৈরি করতে পারেন, যা ডিজাইনারদের জন্য খুবই উপকারী।
Three.js এর বেসিক ধারণা
- Scène (Scene): Three.js এর সব কিছুর মধ্যে একটি Scene থাকে, যেখানে আপনার 3D অবজেক্ট, লাইট এবং ক্যামেরা থাকে।
sceneএকটি কন্টেইনার, যা সব 3D অবজেক্ট গুলোকে ধারণ করে এবং সেই দৃশ্যের সব কিছু পরিচালনা করে। - Camera: Camera হল সেই উপাদান যা দৃশ্য দেখতে সহায়তা করে। সাধারণত PerspectiveCamera বা OrthographicCamera ব্যবহৃত হয়, যা দৃশ্যের গভীরতা এবং দৃষ্টি তৈরি করে।
- Renderer: Renderer হলো সেই উপাদান যা Scene এবং Camera থেকে 3D গ্রাফিক্স রেন্ডার করে। সাধারণত WebGLRenderer ব্যবহৃত হয়, যা আপনার দৃশ্যকে ব্রাউজারে রেন্ডার করে।
- Meshes: Meshes হলো 3D অবজেক্টের মডেল, যা জ্যামিতি (geometry) এবং উপাদান (material) দিয়ে তৈরি হয়। একটি মেশ তৈরি করতে প্রথমে Geometry এবং Material প্রয়োজন হয় এবং তারপর এগুলোকে একত্রিত করে একটি Mesh তৈরি করা হয়।
Three.js এ সাধারণ সিন তৈরি
Three.js দিয়ে একটি বেসিক 3D সিন তৈরি করতে নিচের ধাপগুলো অনুসরণ করা হয়:
- Scene তৈরি করা: প্রথমে একটি
sceneতৈরি করতে হয়, যেখানে সমস্ত 3D অবজেক্ট থাকবে। - Camera তৈরি করা: এরপর একটি ক্যামেরা তৈরি করতে হয়, যা দৃশ্যটি দেখতে সহায়ক হবে।
- Renderer তৈরি করা: তারপর একটি
rendererতৈরি করতে হবে, যা স্ক্রিনে দৃশ্যটি রেন্ডার করবে। - 3D Object তৈরি করা: এরপর একটি 3D অবজেক্ট (যেমন Cube, Sphere ইত্যাদি) তৈরি করতে হবে।
- Animation এবং Rendering: অবশেষে,
requestAnimationFrame()এর মাধ্যমে এনিমেশন এবং রেন্ডারিং কার্যকরী করতে হবে।
বেসিক সিন উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Basic Scene</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
// 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 তৈরি
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Camera position
camera.position.z = 5;
// Animation Loop
function animate() {
requestAnimationFrame(animate);
// Cube rotation
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
এখানে, একটি cube তৈরি করা হয়েছে যা ঘুরছে এবং requestAnimationFrame() এর মাধ্যমে এটি এনিমেট করা হচ্ছে।
সারাংশ
Three.js হল একটি শক্তিশালী JavaScript লাইব্রেরি যা WebGL এর উপর ভিত্তি করে ব্রাউজারে 3D গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। এর সাহায্যে আপনি 3D গেমস, ডেটা ভিজ্যুয়ালাইজেশন, এনিমেশন, 3D ইউজার ইন্টারফেস ইত্যাদি তৈরি করতে পারেন। Three.js-এ Scene, Camera, Renderer, এবং Meshes তৈরি করে 3D কন্টেন্ট রেন্ডার করা হয়। এছাড়া, Eager loading এবং Lazy loading কৌশলসহ অনেক ফিচারের মাধ্যমে আপনি উন্নত গ্রাফিক্স তৈরি করতে পারেন।
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 কন্টেন্ট দেখাতে সক্ষম।
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 কন্টেন্ট দেখাতে সক্ষম।
Three.js কি?
Three.js একটি JavaScript লাইব্রেরি যা WebGL ব্যবহার করে 3D গ্রাফিক্স এবং এনিমেশন তৈরি করতে সাহায্য করে। এটি ডেভেলপারদের জন্য একটি সহজতর ইন্টারফেস প্রদান করে, যার মাধ্যমে তারা ওয়েব ব্রাউজারে 3D কন্টেন্ট প্রদর্শন করতে পারে। WebGL এর জটিলতা থেকে মুক্তি পেতে Three.js ডেভেলপারদের অনেক ব্যবহারিক ফিচার এবং টুলস প্রদান করে, যার মাধ্যমে তারা 3D অবজেক্ট, শেইপ এবং এনিমেশন সহজেই তৈরি করতে পারে।
এখানে আমরা Basic Shapes এবং Mesh তৈরি করার জন্য Three.js এর মৌলিক বিষয়গুলো সম্পর্কে আলোচনা করব।
Three.js এর মূল উপাদানসমূহ
- Scene: থ্রি.জেএস এর মধ্যে 3D কন্টেন্টের ধারণস্থল। এখানে সব 3D অবজেক্ট, ক্যামেরা, এবং লাইট থাকবে।
- Camera: এই উপাদানটি দৃশ্যের দৃশ্যপট নির্ধারণ করে, অর্থাৎ আপনি কোন দিক থেকে দৃশ্য দেখবেন।
- Renderer: এটি স্ক্রীনে 3D দৃশ্য দেখানোর জন্য ব্যবহৃত হয়। সাধারণত
WebGLRendererব্যবহার করা হয়। - Object3D: Three.js এর সমস্ত অবজেক্ট 3D অবজেক্ট (Object3D) থেকে ইনহেরিট করে, যা একটি জেনেরিক ক্লাস যা 3D স্পেসে অবস্থান, রোটেশন, স্কেল ইত্যাদি সেট করতে সাহায্য করে।
Basic Shapes এবং Mesh তৈরি করা
Basic Shapes এবং Mesh তৈরি করতে, প্রথমে geometry এবং material তৈরি করতে হবে। তারপর সেগুলোকে একত্রিত করে একটি mesh তৈরি করা হবে, যা স্ক্রীনে প্রদর্শিত হবে।
১. Scene, Camera এবং Renderer তৈরি করা
প্রথমে একটি scene, camera এবং renderer তৈরি করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Basic Shapes</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>
// 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);
// Camera কে দৃশ্যের মধ্যে সেট করা
camera.position.z = 5;
</script>
</body>
</html>
এখানে, scene তৈরি করা হয়েছে যাতে সমস্ত 3D অবজেক্ট থাকবে। camera দৃশ্যপট দেখানোর জন্য ব্যবহৃত হয়, এবং renderer সেট করা হয়েছে ওয়েবপৃষ্ঠায় 3D কন্টেন্ট প্রদর্শন করতে।
২. Basic Shapes তৈরি করা
এখন আমরা কিছু basic shapes তৈরি করব, যেমন Cube (কিউব), Sphere (গোলক) এবং Cylinder (সিলিন্ডার)। এ জন্য, THREE.BoxGeometry, THREE.SphereGeometry, এবং THREE.CylinderGeometry ব্যবহার করা হবে।
কিউব তৈরি করা:
const geometry = new THREE.BoxGeometry(1, 1, 1); // কিউব গঠনের জন্য geometry
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // সবুজ রঙের ম্যাটেরিয়াল
const cube = new THREE.Mesh(geometry, material); // কিউব Mesh তৈরি করা
scene.add(cube); // কিউব সিনে যোগ করা
গোলক তৈরি করা:
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); // গোলকের জন্য geometry
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // নীল রঙের ম্যাটেরিয়াল
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // গোলক Mesh তৈরি করা
sphere.position.x = 3; // গোলককে x অক্ষরে সরানো
scene.add(sphere); // গোলক সিনে যোগ করা
সিলিন্ডার তৈরি করা:
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32); // সিলিন্ডারের জন্য geometry
const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // লাল রঙের ম্যাটেরিয়াল
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial); // সিলিন্ডার Mesh তৈরি করা
cylinder.position.x = -3; // সিলিন্ডারকে x অক্ষরে সরানো
scene.add(cylinder); // সিলিন্ডার সিনে যোগ করা
৩. Mesh এবং Material
Mesh হচ্ছে একটি 3D অবজেক্ট যা geometry এবং material এর সংমিশ্রণ। geometry হল অবজেক্টের আকার, এবং material হল তার পৃষ্ঠের বৈশিষ্ট্য (যেমন রঙ, টেক্সচার, শেডিং ইত্যাদি)। উপরের কোডে প্রতিটি অবজেক্টের জন্য BoxGeometry, SphereGeometry, এবং CylinderGeometry ব্যবহার করা হয়েছে, এবং তাদের জন্য MeshBasicMaterial ম্যাটেরিয়াল ব্যবহার করা হয়েছে।
৪. অ্যানিমেশন (Animation)
এখন আমাদের basic shapes সবার সঙ্গে কিছু অ্যানিমেশন যোগ করা দরকার। এখানে কিউবের উপর একটি সহজ অ্যানিমেশন দেখানো হয়েছে যেখানে কিউবটি রোটেট হবে।
function animate() {
requestAnimationFrame(animate);
// কিউবের উপর রোটেশন অ্যানিমেশন
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Renderer রেন্ডারিং করছে
renderer.render(scene, camera);
}
animate();
এখানে, requestAnimationFrame() ব্যবহার করে অ্যানিমেশন তৈরি করা হয়েছে যা প্রতি ফ্রেমে কল হয় এবং কিউবটি x এবং y অক্ষরে রোটেট করবে।
৫. ভিউপোর্ট রিসাইজ সাপোর্ট
এখন আমরা স্ক্রীনের আকার পরিবর্তনের সময় সঠিকভাবে 3D দৃশ্যের আকার পরিবর্তন করতে চাই।
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
এটি স্ক্রীন রিসাইজ হওয়ার সময় renderer এবং camera কে আপডেট করবে যাতে 3D দৃশ্য সঠিকভাবে স্কেল হয়।
সারাংশ
Three.js এর মাধ্যমে আপনি সহজেই basic shapes এবং meshes তৈরি করতে পারেন এবং তাদের উপরে অ্যানিমেশন ও ইন্টারঅ্যাকশন যোগ করতে পারেন। উপরিউক্ত উদাহরণগুলো আপনাকে geometry, material, এবং mesh এর মধ্যে সম্পর্ক এবং কিভাবে Three.js ব্যবহার করে 3D দৃশ্য তৈরি করা যায় তা বুঝতে সাহায্য করবে। এগুলোর মাধ্যমে আপনি আরও উন্নত 3D অবজেক্ট এবং এনিমেশন তৈরি করতে পারবেন যা ওয়েব ব্রাউজারে সরাসরি দেখানো যায়।
Three.js এবং 3D গ্রাফিক্স
Three.js হল একটি শক্তিশালী JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি WebGL (Web Graphics Library) এর উপরে ভিত্তি করে কাজ করে, যার মাধ্যমে ব্রাউজারে 3D কনটেন্ট সহজেই রেন্ডার করা সম্ভব হয়। Three.js এর সাহায্যে আপনি 3D সোজা গ্রাফিক্স তৈরি করতে পারেন, যেমন মডেলিং, অ্যানিমেশন, শেডিং ইত্যাদি।
Three.js এ Materials এবং Colors হল দুটি গুরুত্বপূর্ণ উপাদান, যা গ্রাফিক্সে দৃশ্যমান অবজেক্টগুলোর ভিজ্যুয়াল উপস্থাপনাকে কাস্টমাইজ করতে সহায়তা করে। এই গাইডে আমরা দেখব কিভাবে Materials এবং Colors ব্যবহার করা হয়।
Materials in Three.js
Materials হল 3D অবজেক্টের পৃষ্ঠতলের দৃশ্যমানতা কিভাবে প্রদর্শিত হবে তা নির্ধারণকারী উপাদান। 3D অবজেক্টে রঙ, শেডিং, টেক্সচার এবং আলোর প্রতিক্রিয়া সবই Material দ্বারা নির্ধারিত হয়। Three.js বিভিন্ন ধরনের Materials প্রদান করে, যার মাধ্যমে আপনি প্রতিটি অবজেক্টের পৃষ্ঠের গুণাবলী কাস্টমাইজ করতে পারেন।
Three.js এ কিছু সাধারণ Material Types হল:
- MeshBasicMaterial: কোন লাইটের প্রভাব ছাড়াই গ্রাফিক্স রেন্ডার করে, শুধুমাত্র রঙ বা টেক্সচার ব্যবহার করে।
- MeshLambertMaterial: এটি একটি শেডেড মেটেরিয়াল যা diffuse reflection ব্যবহার করে, যার ফলে এটি একটি হালকা, ম্যাট (matte) ফিনিশ তৈরি করে।
- MeshPhongMaterial: এটি একটি শিনী মেটেরিয়াল যা specular reflection ব্যবহার করে, যা আরও স্পষ্ট এবং চকচকে ফিনিশ তৈরি করে।
- MeshStandardMaterial: এটি PBR (Physically-Based Rendering) সাপোর্ট করে এবং বিভিন্ন আলোর পরিবেশে আরও বাস্তবসম্মত ফলাফল প্রদান করে।
- MeshToonMaterial: এটি একটি টুন (cartoonish) স্টাইল মেটেরিয়াল, যা সাধারণত 3D ক্যারেক্টার ডিজাইনে ব্যবহৃত হয়।
উদাহরণ: MeshBasicMaterial ব্যবহার
// 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);
// MeshBasicMaterial ব্যবহার
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // সবুজ রঙ
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// Animation Loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
এখানে, MeshBasicMaterial ব্যবহার করে একটি সবুজ রঙের ঘনবস্তুর (cube) তৈরি করা হয়েছে। এটি কোনো আলোর প্রভাব ছাড়াই দৃশ্যমান হয়।
Colors in Three.js
Colors হল 3D অবজেক্টের উপাদানের দৃশ্যমান রঙের নির্ধারণ। Three.js এ আপনি বিভিন্ন উপায়ে রঙ সেট করতে পারেন, যেমন hexadecimal, RGB, বা HSL ফরম্যাটে।
Three.js এ রঙ সেট করার জন্য সাধারণত THREE.Color ক্লাস ব্যবহার করা হয়। এই ক্লাসটি আপনাকে রঙের মান (color value) সেট করতে সাহায্য করে।
রঙ নির্ধারণের উপায়:
- Hexadecimal:
0xRRGGBB - RGB:
rgb(r, g, b) - HSL:
hsl(h, s%, l%)
উদাহরণ: Color ব্যবহার
// 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);
// MeshPhongMaterial এবং Color ব্যবহার
const geometry = new THREE.SphereGeometry();
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // সবুজ রঙ
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
camera.position.z = 5;
// Lighting Setup (since MeshPhongMaterial needs light)
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);
// Animation Loop
function animate() {
requestAnimationFrame(animate);
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
এখানে, MeshPhongMaterial ব্যবহার করা হয়েছে এবং color প্রপার্টি দিয়ে 0x00ff00 (সবুজ রঙ) সেট করা হয়েছে। এছাড়া, lighting যুক্ত করা হয়েছে কারণ MeshPhongMaterial এর জন্য আলোর প্রয়োজন।
Materials এবং Colors সম্পর্কিত কিছু অতিরিক্ত টিপস:
- শেডিং পরিবর্তন: আপনি MeshLambertMaterial এবং MeshPhongMaterial এর মাধ্যমে শেডিং স্টাইল পরিবর্তন করতে পারেন। যদি আপনি সুন্দর আলোকসজ্জা চান তবে MeshPhongMaterial নির্বাচন করুন, এবং যদি আপনি ম্যাট (matte) ফিনিশ চান, তবে MeshLambertMaterial ব্যবহার করুন।
- PBR (Physically-Based Rendering): আধুনিক 3D গ্রাফিক্সের জন্য MeshStandardMaterial এর মাধ্যমে PBR সাপোর্ট পাবেন, যা বাস্তবসম্মত আলোর প্রতিক্রিয়া তৈরি করে।
- Textures ব্যবহার: Materials এ টেক্সচার যোগ করতে আপনি
mapপ্রপার্টি ব্যবহার করতে পারেন, যা একটি ছবি বা টেক্সচার ব্যবহার করে 3D অবজেক্টে চেহারা পরিবর্তন করতে সাহায্য করে।
সারাংশ
Three.js এ Materials এবং Colors হল 3D গ্রাফিক্সের দৃশ্যমানতা নির্ধারণের গুরুত্বপূর্ণ উপাদান। Materials আপনার 3D অবজেক্টের পৃষ্ঠের গুণাবলী নির্ধারণ করে যেমন রঙ, শেডিং, টেক্সচার এবং আলোর প্রতিক্রিয়া। Colors ব্যবহার করে আপনি এই materials এর রঙ কাস্টমাইজ করতে পারেন। MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, এবং MeshStandardMaterial এর মতো বিভিন্ন ধরনের মেটেরিয়াল থেকে আপনি আপনার গ্রাফিক্সের জন্য সঠিকটি নির্বাচন করতে পারেন। 3D গ্রাফিক্সে বাস্তবসম্মত এবং সুন্দর দৃশ্য তৈরি করতে এই উপাদানগুলি খুবই গুরুত্বপূর্ণ।
Read more
