Window Resize Events এবং Camera Aspect Ratio সমন্বয়

Three.js এবং Window Resize Events

Three.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে সহায়তা করে। যখন আপনি Three.js দিয়ে 3D সেকেন্ডে বা ওয়েব পেজে কোনো দৃশ্য (scene) তৈরি করেন, তখন পেজের সাইজ বা উইন্ডো রেজাইস করার সময় 3D দৃশ্যের উপাদান (elements) সঠিকভাবে রেন্ডার না হতে পারে। এর জন্য উইন্ডো রিজাইজ ইভেন্টগুলির মাধ্যমে camera এবং renderer সঠিকভাবে আপডেট করা প্রয়োজন।

এখানে আমরা দেখব কিভাবে Window Resize Events পরিচালনা করে Camera এর aspect ratio সমন্বয় করা যায়, যাতে দৃশ্যটি সবসময় সঠিকভাবে রেন্ডার হয়।

Window Resize Events এবং Camera Aspect Ratio সমন্বয়

Three.js-এ যখন উইন্ডো বা স্ক্রিন রিজাইজ হয়, তখন camera এর aspect ratio এবং renderer এর সাইজ পরিবর্তন করতে হবে যাতে 3D দৃশ্যের রেন্ডারিং সঠিক থাকে। এই প্রক্রিয়াটি করার জন্য আপনি resize ইভেন্ট শোনা এবং পরে camera.aspect এবং renderer.setSize আপডেট করতে হবে।

১. ক্যামেরার অ্যাসপেক্ট রেশিও পরিবর্তন

Three.js-এ ক্যামেরার aspect ratio হল ক্যামেরা viewport-এর প্রস্থ (width) এবং উচ্চতা (height)-এর অনুপাত। যখন ব্রাউজারের সাইজ পরিবর্তিত হয়, তখন ক্যামেরার aspect ratio আপডেট করতে হয়।

// 1. Create the camera with initial aspect ratio
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

এখানে, camera.aspect এর মান শুরুতে উইন্ডোর প্রস্থ এবং উচ্চতার অনুপাত হিসাবে সেট করা হয়েছে।

২. resize event listener যুক্ত করা

আপনার স্ক্রিনের আকার পরিবর্তন হলে, ক্যামেরার aspect ratio এবং renderer এর সাইজ আপডেট করতে window.addEventListener() ব্যবহার করে একটি resize ইভেন্ট শোনা হয়।

// 3D Renderer setup
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// Event listener for window resize
window.addEventListener('resize', onWindowResize, false);

// Function to update camera and renderer size when window is resized
function onWindowResize() {
  // Update the camera aspect ratio and recompute the projection matrix
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  // Update the renderer size
  renderer.setSize(window.innerWidth, window.innerHeight);
}

৩. Renderer সাইজ পরিবর্তন

renderer.setSize(width, height) এর মাধ্যমে রেন্ডারারের সাইজ আপডেট করা হয়, যাতে এটি উইন্ডোর নতুন সাইজ অনুযায়ী সঠিকভাবে রেন্ডার হয়।

পূর্ণ কোড উদাহরণ

এখানে একটি সম্পূর্ণ উদাহরণ দেয়া হলো, যেখানে উইন্ডো রিজাইজ ইভেন্টে ক্যামেরার অ্যাসপেক্ট রেশিও এবং রেন্ডারার সাইজ সমন্বয় করা হয়েছে:

// 1. Create the scene
const scene = new THREE.Scene();

// 2. Create the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 3. Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 4. Create a cube geometry and material
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 5. Set the camera position
camera.position.z = 5;

// 6. Create the animation loop
function animate() {
  requestAnimationFrame(animate);

  // Rotate the cube for some basic animation
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // Render the scene from the perspective of the camera
  renderer.render(scene, camera);
}

// 7. Event listener for window resize
window.addEventListener('resize', onWindowResize, false);

// 8. Function to update camera and renderer when window is resized
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight; // Update the camera's aspect ratio
  camera.updateProjectionMatrix(); // Recompute the projection matrix
  
  renderer.setSize(window.innerWidth, window.innerHeight); // Update the renderer size
}

// 9. Start the animation loop
animate();

এখানে:

• scene: আমাদের 3D দৃশ্য।
• camera: পার্সপেকটিভ ক্যামেরা, যার অ্যাসপেক্ট রেশিও উইন্ডোর প্রস্থ এবং উচ্চতার অনুপাত।
• renderer: WebGLRenderer যেটি দৃশ্যটি রেন্ডার করে।
• cube: একটি 3D বক্স যা দৃশ্যে প্রদর্শিত হয়।

Window Resize Events সমন্বয় করার জন্য onWindowResize() ফাংশনটি ব্যবহার করা হয়েছে, যা ক্যামেরার অ্যাসপেক্ট রেশিও এবং রেন্ডারারের সাইজ আপডেট করে।

সারাংশ

Three.js-এ Window Resize Events এবং Camera Aspect Ratio সমন্বয়ের মাধ্যমে, আপনি আপনার 3D দৃশ্যের সঠিক রেন্ডারিং নিশ্চিত করতে পারেন, বিশেষত যখন ব্রাউজারের আকার পরিবর্তিত হয়। resize ইভেন্টে ক্যামেরার অ্যাসপেক্ট রেশিও এবং রেন্ডারারের সাইজ আপডেট করে দৃশ্যটি সঠিকভাবে রেন্ডার করা হয়। এটি ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে, বিশেষত রেসপনসিভ ডিজাইনের ক্ষেত্রে।