Three.js এবং dat.GUI এর ভূমিকা
Three.js হল একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়, যা ব্রাউজারে রেন্ডার করা যায়। এটি WebGL এর উপর ভিত্তি করে কাজ করে এবং 3D সিকোয়েন্স বা দৃশ্য তৈরি করার জন্য সহজ এবং শক্তিশালী একটি টুল প্রদান করে।
এছাড়া, dat.GUI হল একটি গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) লাইব্রেরি যা JavaScript-এ কাস্টম ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। এটি সাধারনত ডেভেলপারদের জন্য বিভিন্ন ধরনের ভেরিয়েবল যেমন দৃশ্যের ক্যামেরা, লাইট, এবং অবজেক্টের গুণাবলী নিয়ন্ত্রণের জন্য ব্যবহৃত হয়।
dat.GUI ব্যবহার করে Three.js দৃশ্যের বিভিন্ন উপাদান যেমন ক্যামেরা, লাইট, অবজেক্ট ইত্যাদি নিয়ন্ত্রণ করা সহজ হয়ে যায়। এটি আপনাকে রিয়েল টাইমে দৃশ্যের পরিবর্তন দেখতে সাহায্য করে।
dat.GUI ব্যবহার করে Three.js Scene নিয়ন্ত্রণ
dat.GUI লাইব্রেরি Three.js-এ 3D দৃশ্যের উপাদানগুলির জন্য কাস্টম GUI তৈরি করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি দৃশ্যের বৈশিষ্ট্য যেমন ক্যামেরার অবস্থান, লাইটের প্রভাব, বা কোনো 3D অবজেক্টের রঙ পরিবর্তন করতে পারবেন। চলুন, কীভাবে dat.GUI ব্যবহার করে Three.js দৃশ্য নিয়ন্ত্রণ করা যায়, তা উদাহরণ দিয়ে দেখি।
১. dat.GUI ইনস্টলেশন
প্রথমে dat.GUI ইনস্টল করতে হবে। আপনি CDN ব্যবহার করে এটি ব্রাউজারে ইনক্লুড করতে পারেন অথবা npm বা yarn এর মাধ্যমে এটি ইনস্টল করতে পারেন।
CDN ব্যবহার করে:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat.gui/0.7.7/dat.gui.min.js"></script>
npm/yarn ব্যবহার করে:
npm install dat.gui
২. একটি সাধারণ Three.js Scene সেটআপ
একটি সাধারণ Three.js দৃশ্য তৈরি করা এবং তার পর dat.GUI দিয়ে সেই দৃশ্যের উপাদান নিয়ন্ত্রণ করার জন্য নিচের কোডটি দেখতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js with dat.GUI</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 src="https://cdnjs.cloudflare.com/ajax/libs/dat.gui/0.7.7/dat.gui.min.js"></script>
<script>
// Scene, Camera and Renderer Setup
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);
// 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);
// Set the camera position
camera.position.z = 5;
// dat.GUI setup
const gui = new dat.GUI();
// Cube controls
const cubeFolder = gui.addFolder('Cube');
cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2);
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2);
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2);
cubeFolder.add(cube.scale, 'x', 0, 2);
cubeFolder.add(cube.scale, 'y', 0, 2);
cubeFolder.add(cube.scale, 'z', 0, 2);
// Background color controls
const controls = {
color: '#000000'
};
gui.addColor(controls, 'color').onChange(function(value) {
scene.background = new THREE.Color(value);
});
// Render loop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
৩. কোডের ব্যাখ্যা:
- Scene, Camera, and Renderer: প্রথমে একটি
sceneতৈরি করা হয়, তারপর একটি PerspectiveCamera সেট করা হয়, যা 3D দৃশ্যের দর্শনীয় দিক নিয়ন্ত্রণ করবে। এরপর, একটি WebGLRenderer ব্যবহার করে সেই দৃশ্য রেন্ডার করা হয়। - Cube Creation: একটি সাধারণ cube তৈরি করা হয়, যা BoxGeometry এবং MeshBasicMaterial ব্যবহার করে তৈরি করা হয়। এটি দৃশ্যে যোগ করা হয়।
- dat.GUI Integration:
dat.GUIব্যবহার করে ইউজার ইন্টারফেস তৈরি করা হয় যা Cube এর rotation এবং scale নিয়ন্ত্রণ করতে পারে।cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2)এর মাধ্যমে Cube এর rotation প্রপার্টি নিয়ন্ত্রণ করা হচ্ছে।- Background Color পরিবর্তন করার জন্য একটি color picker যোগ করা হয়েছে যা
scene.backgroundপ্রপার্টি পরিবর্তন করবে।
- Render Loop:
animate()ফাংশনটি requestAnimationFrame ব্যবহার করে দৃশ্যটি নিয়মিতভাবে রেন্ডার করে।
৪. অতিরিক্ত কাস্টমাইজেশন এবং GUI Control
Camera Controls: আপনি GUI-তে ক্যামেরার অবস্থান নিয়ন্ত্রণের জন্য নতুন অপশন যোগ করতে পারেন।
const cameraFolder = gui.addFolder('Camera'); cameraFolder.add(camera.position, 'x', -10, 10); cameraFolder.add(camera.position, 'y', -10, 10); cameraFolder.add(camera.position, 'z', -10, 10);Light Controls: যদি আপনার দৃশ্যে আলো (light) থাকে, তবে আপনি সেটি নিয়ন্ত্রণ করার জন্য GUI ব্যবহার করতে পারেন।
const light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(10, 10, 10); scene.add(light); const lightFolder = gui.addFolder('Light'); lightFolder.add(light.position, 'x', -10, 10); lightFolder.add(light.position, 'y', -10, 10); lightFolder.add(light.position, 'z', -10, 10);
সারাংশ
dat.GUI হল একটি শক্তিশালী লাইব্রেরি যা আপনাকে Three.js দৃশ্যের উপাদান যেমন ক্যামেরা, লাইট, অবজেক্ট ইত্যাদি নিয়ন্ত্রণ করতে সাহায্য করে। আপনি rotation, scale, position, background color সহ অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারবেন এবং রিয়েল টাইমে আপনার পরিবর্তনগুলো দেখতে পারবেন। এটি একটি সহজ এবং কার্যকরী টুল যা 3D দৃশ্য এবং অ্যাপ্লিকেশনগুলোতে ইন্টারঅ্যাকটিভ কাস্টমাইজেশন যোগ করার জন্য ব্যবহৃত হয়।
Read more
