Three.js এবং Skybox
Three.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে, যা ব্রাউজারে 3D গ্রাফিক্স রেন্ডারিং সহজ করে তোলে। Skybox হল একটি 3D পরিবেশের চারপাশে একটি দৃশ্যমান বক্স, যা সাধারণত 6টি বেসিক ইমেজ (চারটি পাশ, একটি উপরের এবং একটি নিচের) দ্বারা গঠিত।
CubeTextureLoader হলো Three.js এর একটি বিশেষ ক্লাস যা 6টি ইমেজের একটি সেট লোড করে এবং সেটিকে একটি স্কাইবক্স হিসেবে ব্যবহার করার জন্য প্রস্তুত করে। এটি সাধারণত স্কাইবক্স তৈরি করতে ব্যবহৃত হয়, যাতে আপনি একটি 3D দৃশ্যের চারপাশে একটি পরিবেশ সৃষ্টি করতে পারেন।
CubeTextureLoader দিয়ে Skybox তৈরি করার ধাপ
এখানে, Three.js এর CubeTextureLoader ব্যবহার করে কিভাবে একটি স্কাইবক্স তৈরি করতে হয়, তা নিয়ে আলোচনা করা হবে।
১. প্রথমে Three.js লাইব্রেরি ইনক্লুড করুন
প্রথমেই আপনাকে Three.js লাইব্রেরি ইনক্লুড করতে হবে। আপনি এটি CDN থেকে লোড করতে পারেন অথবা আপনার প্রোজেক্টে ইনস্টল করতে পারেন।
CDN ব্যবহার করে:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
NPM ব্যবহার করে:
npm install three
২. Scene, Camera এবং Renderer সেটআপ
Three.js ব্যবহার করতে হলে, একটি Scene, Camera, এবং Renderer প্রয়োজন। এই তিনটি উপাদান হলো আপনার 3D পরিবেশের মূল অংশ।
// Scene তৈরি করুন
const scene = new THREE.Scene();
// Camera তৈরি করুন
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// WebGLRenderer তৈরি করুন
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
৩. CubeTextureLoader দিয়ে Skybox লোড করা
CubeTextureLoader ব্যবহার করে 6টি ইমেজের একটি সেট লোড করতে হবে। এটি 6টি ইমেজের মাধ্যমে একটি স্কাইবক্স তৈরি করবে।
const loader = new THREE.CubeTextureLoader();
// 6টি ইমেজের পাথ
const texture = loader.load([
'path/to/px.jpg', // Positive X
'path/to/nx.jpg', // Negative X
'path/to/py.jpg', // Positive Y
'path/to/ny.jpg', // Negative Y
'path/to/pz.jpg', // Positive Z
'path/to/nz.jpg', // Negative Z
]);
// Scene এ স্কাইবক্স যোগ করুন
scene.background = texture;
এখানে, loader.load() মেথডে 6টি পাথ দেওয়া হয়েছে যা স্কাইবক্সের বিভিন্ন দিককে নির্দেশ করে। ইমেজগুলির পাথ আপনাকে আপনার প্রোজেক্ট ফোল্ডারে উপযুক্তভাবে সেট করতে হবে।
৪. অবজেক্ট যোগ করা এবং ক্যামেরা সেট করা
এখন আমরা কিছু 3D অবজেক্ট যেমন একটি কিউব যোগ করতে পারি যাতে স্কাইবক্সের পরিবেশ ভালোভাবে দৃশ্যমান হয়। এছাড়া, ক্যামেরা নির্দিষ্ট স্থান থেকে দৃশ্য দেখবে এবং অ্যানিমেশন তৈরি করব।
// 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.z = 5;
// Animate ফাংশন
function animate() {
requestAnimationFrame(animate);
// কিউবের রোটেশন
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// রেন্ডার
renderer.render(scene, camera);
}
animate();
এখানে, animate() ফাংশনটি রেন্ডারিং চক্র চালায়, যেখানে কিউবটি প্রতি ফ্রেমে ঘোরানো হচ্ছে। এইভাবে, আপনার স্কাইবক্সের মধ্যে কিউবটি প্রদর্শিত হবে।
৫. পর্ণামানিক রেসপন্সিভ ডিজাইন
এখন আমরা ব্রাউজার সাইজ পরিবর্তন হলে রেন্ডারিং সঠিকভাবে কাজ করবে এমন একটি ফিচার যোগ করতে পারি। এর জন্য resize ইভেন্টে রেন্ডারার এবং ক্যামেরার রেশিও আপডেট করতে হবে।
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
এটি স্ক্রীনের আকার পরিবর্তন হলে সঠিকভাবে স্ক্রীন রিসাইজ করবে।
সম্পূর্ণ কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skybox with Three.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
// Scene, Camera and 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);
// Load Skybox with CubeTextureLoader
const loader = new THREE.CubeTextureLoader();
const texture = loader.load([
'path/to/px.jpg', 'path/to/nx.jpg', 'path/to/py.jpg', 'path/to/ny.jpg', 'path/to/pz.jpg', 'path/to/nz.jpg'
]);
scene.background = texture;
// Create a Cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Position camera
camera.position.z = 5;
// Animation function
function animate() {
requestAnimationFrame(animate);
// Cube rotation
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Render scene
renderer.render(scene, camera);
}
// Window resize listener
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
animate();
</script>
</body>
</html>
সারাংশ
Three.js ব্যবহার করে CubeTextureLoader দিয়ে একটি Skybox তৈরি করা সহজ এবং কার্যকরী। এই কোডের মাধ্যমে আপনি 3D দৃশ্যের চারপাশে একটি পরিবেশ তৈরি করতে পারেন। স্কাইবক্সের জন্য 6টি ইমেজ ব্যবহার করে আপনি একটি সুন্দর 3D ব্যাকগ্রাউন্ড তৈরি করতে পারবেন, এবং এটি আপনার দৃশ্যের বাস্তবিকতা এবং গভীরতা আরও বৃদ্ধি করবে।
Read more
