Three.js কি?
Three.js একটি জনপ্রিয় 3D JavaScript লাইব্রেরি, যা আপনাকে ব্রাউজারে 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করার ক্ষমতা প্রদান করে। এটি WebGL ব্যবহার করে গ্রাফিক্স রেন্ডার করে এবং এমন অনেক ফিচার প্রদান করে যা 3D ভিজ্যুয়ালাইজেশনকে আরও সহজ এবং কার্যকর করে তোলে।
একটি responsive canvas তৈরি করা অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি 3D কন্টেন্টের উপযুক্ত প্রদর্শন নিশ্চিত করে যেহেতু ব্যবহারকারীরা বিভিন্ন স্ক্রীন সাইজ এবং ডিভাইসে অ্যাক্সেস করতে পারে। Three.js এর জন্য responsive canvas তৈরি করার জন্য আপনাকে viewport size এবং aspect ratio অনুযায়ী ক্যানোসের সাইজ পরিবর্তন করতে হবে। এখানে, আমরা দেখব কিভাবে আপনি Three.js এর canvas সেটআপ করতে পারেন যাতে এটি বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজের সাথে সামঞ্জস্যপূর্ণ হয়।
১. Responsive Canvas তৈরি করার জন্য স্টেপ-বাই-স্টেপ গাইড
Three.js এর জন্য responsive canvas তৈরি করতে আপনি প্রথমে HTML, CSS এবং JavaScript কোড ব্যবহার করবেন যাতে স্ক্রীনের আকার অনুযায়ী canvas সাইজ আপডেট হয়। নিচে এর জন্য সাধারণ একটি উদাহরণ দেওয়া হলো:
HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Three.js Canvas</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="app.js"></script>
</body>
</html>
এখানে, three.min.js CDN থেকে Three.js ইম্পোর্ট করা হয়েছে, এবং app.js নামে একটি JavaScript ফাইল তৈরি করা হয়েছে যেখানে আমরা 3D কন্টেন্ট তৈরি করব।
JavaScript (app.js) সেটআপ:
// 1. 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();
// 2. Renderer এর সাইজ সেট করা (responsive)
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 3. একটি 3D অবজেক্ট (Cube) তৈরি করা
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 4. Camera পজিশন সেট করা
camera.position.z = 5;
// 5. Resizing এর জন্য event listener যোগ করা
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
// Renderer সাইজ আপডেট করা
renderer.setSize(width, height);
// Camera এর aspect ratio আপডেট করা
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
// 6. Animation function
const animate = function () {
requestAnimationFrame(animate);
// Cube রোটেট করা
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Scene রেন্ডার করা
renderer.render(scene, camera);
};
// 7. Animation চালানো
animate();
২. বিস্তারিত ব্যাখ্যা
- Scene, Camera এবং Renderer: প্রথমে আমরা একটি scene তৈরি করি যা আমাদের 3D অবজেক্ট গুলো ধারণ করবে। তারপর camera তৈরি করি যা perspective view প্রদান করবে। অবশেষে, renderer তৈরি করা হয় যা WebGL ব্যবহার করে 3D কন্টেন্টকে রেন্ডার করবে।
- Canvas এর সাইজ আপডেট করা:
renderer.setSize(window.innerWidth, window.innerHeight)ব্যবহার করে আমরা renderer এর সাইজ ব্রাউজারের বর্তমান সাইজ অনুযায়ী সেট করি। - 3D অবজেক্ট তৈরি করা: এখানে আমরা একটি cube তৈরি করেছি যেটি একটি
BoxGeometryএবং একটিMeshBasicMaterialব্যবহার করে 3D সাস্পেন্সে প্রদর্শিত হবে। - Camera Position: আমরা ক্যামেরার পজিশন সেট করেছি যাতে cube দৃশ্যমান থাকে।
- Resize Listener:
window.addEventListener('resize', ...)ব্যবহার করে আমরা ওয়েবপেজ রিসাইজ হওয়ার সাথে সাথে canvas এর সাইজ এবং ক্যামেরার aspect ratio আপডেট করি। এটি গুরুত্বপূর্ণ কারণ স্ক্রীন রিসাইজ হওয়ার সাথে সাথে 3D কন্টেন্ট ঠিকভাবে প্রদর্শিত হবে। - Animation:
animate()ফাংশনটি একে অপরের পর চলতে থাকে এবং cube এর উপর রোটেশন প্রয়োগ করে। এরপরrenderer.render()ব্যবহার করে scene এবং camera রেন্ডার করা হয়।
৩. Responsive Design নিশ্চিত করা
এই কোডের মাধ্যমে আমরা একটি responsive canvas তৈরি করেছি, যা স্ক্রীন সাইজের উপর নির্ভর করে পরিবর্তন হয়। আপনি যেকোনো ডিভাইসে এই canvas কে প্রপার সাইজে প্রদর্শন করতে পারবেন।
- window.innerWidth এবং window.innerHeight এর মাধ্যমে স্ক্রীন সাইজের তথ্য নেয়া হয় এবং renderer.setSize এর মাধ্যমে সেই অনুযায়ী canvas সাইজ আপডেট করা হয়।
- resize event listener যুক্ত করার ফলে, যেকোনো সাইজ পরিবর্তনে renderer এবং camera আপডেট হবে।
৪. Additional Features (অতিরিক্ত ফিচার)
OrbitControls: আপনি যদি 3D কন্টেন্টের সাথে ইন্টারঅ্যাকশন করতে চান, যেমন zoom in/out এবং রোটেট করতে চান, তবে
OrbitControls.jsব্যবহার করতে পারেন। এটি ব্যবহারকারীদের মাউস দিয়ে 3D দৃশ্যের সাথে ইন্টারঅ্যাক্ট করতে সহায়তা করে।আপনি এটি Three.js এর সাথে যোগ করতে পারেন:
import { OrbitControls } from 'three/examples/js/controls/OrbitControls.js'; const controls = new OrbitControls(camera, renderer.domElement); controls.update();- Resize Handling with CSS: CSS দিয়ে canvas এর আকার আরো নিয়ন্ত্রণ করতে পারেন। তবে, JavaScript কনফিগারেশন আরও শক্তিশালী এবং ফ্লেক্সিবল।
সারাংশ
Three.js ব্যবহার করে responsive canvas তৈরি করা গুরুত্বপূর্ণ, যাতে 3D কন্টেন্টটি বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শিত হয়। এই গাইডে, আমরা দেখেছি কিভাবে আপনি canvas resizing, camera aspect ratio adjustment, এবং event listeners ব্যবহার করে responsive design অর্জন করতে পারেন। এছাড়া, অন্যান্য 3D ইন্টারঅ্যাকশন ফিচার যেমন OrbitControls ব্যবহার করেও আপনার 3D অ্যাপ্লিকেশন আরও ইন্টারেকটিভ এবং ইউজার ফ্রেন্ডলি করতে পারেন।
Read more
