Three.js এবং ক্যামেরা কন্ট্রোলস
Three.js হল একটি 3D গ্রাফিক্স লাইব্রেরি যা JavaScript দিয়ে ওয়েব ব্রাউজারে 3D গ্রাফিক্স রেন্ডার করতে সহায়তা করে। এটি WebGL এর উপরে কাজ করে এবং 3D মডেল, সীন, এবং ক্যামেরার সাথে ইন্টারঅ্যাকশন পরিচালনা করতে সহায়ক টুলস প্রদান করে।
Camera Controls হল Three.js এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারীদের সীন এবং 3D অবজেক্টের চারপাশে ক্যামেরা ঘোরানোর, জুম ইন এবং আউট করার মতো সুবিধা দেয়। OrbitControls এবং TrackballControls হল দুটি জনপ্রিয় ক্যামেরা কন্ট্রোল যা আপনাকে থ্রি.জেএস-এ ক্যামেরা পরিচালনার জন্য সহায়তা করবে।
১. OrbitControls
OrbitControls একটি Three.js প্লাগইন যা ক্যামেরাকে একটি নির্দিষ্ট পিভট পয়েন্টের চারপাশে ঘোরানোর সুবিধা দেয়। এটি সাধারণত ওয়েব 3D অ্যাপ্লিকেশন এবং গেমের মধ্যে ক্যামেরা কন্ট্রোলের জন্য ব্যবহৃত হয়। OrbitControls ব্যবহারকারীকে 3D দৃশ্যের চারপাশে ক্যামেরাকে ঘোরাতে, প্যান করতে এবং জুম করতে দেয়। এটি অনেকটা গুগল ম্যাপস বা অন্যান্য 3D ভিউ অ্যাপ্লিকেশনগুলির মতো কাজ করে।
OrbitControls ব্যবহার করার জন্য পদক্ষেপ:
- প্রথমে Three.js এর সাথে OrbitControls.js স্ক্রিপ্ট ইনক্লুড করুন। এটি Three.js এর সাথে অন্তর্ভুক্ত থাকে তবে এটি আলাদা করে ইনস্টল বা আমদানি করতে হতে পারে।
- OrbitControls ক্লাসটি Three.js-এ ক্যামেরা কন্ট্রোলের জন্য ব্যবহার করুন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OrbitControls Example</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/three.js/r128/controls/OrbitControls.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var animate = function () {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
এখানে, OrbitControls ব্যবহার করে আমরা একটি ক্যামেরা সেটআপ করেছি যা ব্যবহারকারীকে cube এর চারপাশে ঘোরানোর সুবিধা দেবে।
২. TrackballControls
TrackballControls হল একটি ক্যামেরা কন্ট্রোল যা OrbitControls এর মতোই কিন্তু এটি আরও ফ্লুইড এবং সোজা লাইন থেকে দূরে ক্যামেরা ঘোরাতে সহায়তা করে। এটি Trackball (মাউসের ট্র্যাকে) ভিত্তিক, যেখানে ব্যবহারকারী ক্যামেরা ঘোরানোর জন্য মাউসের ড্র্যাগ ব্যবহার করতে পারে। এটি সহজেই 3D অবজেক্টের সাথে গভীর ইন্টারঅ্যাকশন তৈরি করে এবং এটি সাধারণত 3D CAD এবং গেম ডেভেলপমেন্ট-এ ব্যবহৃত হয়।
TrackballControls ব্যবহার করার জন্য পদক্ষেপ:
- Three.js এ TrackballControls.js স্ক্রিপ্ট ইনক্লুড করুন।
- TrackballControls ক্লাস ব্যবহার করুন ক্যামেরা কন্ট্রোলের জন্য।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrackballControls Example</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/three.js/r128/controls/TrackballControls.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
camera.position.z = 5;
var controls = new THREE.TrackballControls(camera, renderer.domElement);
var animate = function () {
requestAnimationFrame(animate);
controls.update(); // Only required if controls.enableDamping = true, or if controls.auto-rotation is enabled
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
এখানে, TrackballControls ব্যবহার করে আমরা একটি sphere 3D অবজেক্টে ক্যামেরা কন্ট্রোল প্রয়োগ করেছি যা ব্যবহারকারীদের ঘোরানোর জন্য মাউস ড্র্যাগ করার সুযোগ দেয়।
OrbitControls vs TrackballControls
| বৈশিষ্ট্য | OrbitControls | TrackballControls |
|---|---|---|
| ব্যবহার | এক বা একাধিক পিভট পয়েন্টের চারপাশে ঘোরানো | মাউস ড্র্যাগ ব্যবহার করে ঘোরানো |
| প্রধান সুবিধা | ব্যবহারকারীকে সহজে 3D দৃশ্য ঘোরানোর সুযোগ দেয় | অনেক বেশি ফ্লুইড এবং ইন্টারঅ্যাকটিভ |
| কোড সিম্পলিসিটি | অপেক্ষাকৃত সহজ এবং সোজা | কিছুটা জটিল এবং আরও বেশি কাস্টমাইজযোগ্য |
| প্রযুক্তি | সাধারণ 3D সীন, যেমন ওয়েব মডেল | উন্নত 3D সীন এবং CAD গ্রাফিক্স |
সারাংশ
Three.js-এ Camera Controls ব্যবহার করে আপনি 3D দৃশ্যের উপর ইন্টারঅ্যাকশন করতে পারবেন। OrbitControls এবং TrackballControls হল দুইটি জনপ্রিয় ক্যামেরা কন্ট্রোল, যেখানে OrbitControls সাধারণত 3D দৃশ্যের উপর ঘোরানোর জন্য ব্যবহৃত হয় এবং TrackballControls ব্যবহারকারীদের আরো ফ্লুইডভাবে ঘোরাতে এবং নিয়ন্ত্রণ করতে সাহায্য করে। আপনি আপনার 3D অ্যাপ্লিকেশন এবং দৃশ্যের প্রয়োজন অনুসারে এই কন্ট্রোলগুলো বেছে নিতে পারেন।
Read more
