Three.js এবং টাচ কন্ট্রোল
Three.js হল একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করতে ব্যবহৃত হয়। এটি ওয়েব ব্রাউজারে 3D গ্রাফিক্স, অ্যানিমেশন, এবং ইন্টারঅ্যাক্টিভ ভিজ্যুয়ালাইজেশন তৈরি করার জন্য অত্যন্ত জনপ্রিয় এবং শক্তিশালী একটি টুল। Touch Controls এবং Gesture Support হল এমন দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা থ্রি.জেএস ব্যবহারকারীদের 3D দৃশ্যের সাথে তৃতীয় পক্ষের ইন্টারঅ্যাকশন আরও কার্যকরী এবং প্রাকৃতিকভাবে চালাতে সহায়তা করে, বিশেষত মোবাইল ডিভাইস বা ট্যাবলেটের জন্য।
Touch Controls এবং Gesture Support কি?
Touch Controls এবং Gesture Support হল 3D দৃশ্যে টাচ স্ক্রিনের মাধ্যমে নিয়ন্ত্রণের জন্য ব্যবহৃত টেকনিক। টাচ কন্ট্রোল ব্যবহারকারীদের 3D দৃশ্যের মধ্যে বিভিন্ন আন্দোলন (যেমন প্যান, জুম, রোটেট) করতে সাহায্য করে, এবং gesture recognition ব্যবহারকারীকে কয়েকটি আঙ্গুলের অঙ্গভঙ্গি (যেমন স্ক্রোলিং, পিন্চ, ট্যাপ) এর মাধ্যমে ইন্টারঅ্যাকশন করতে দেয়। এই বৈশিষ্ট্যগুলি মোবাইল এবং ট্যাবলেট ডিভাইসে 3D অ্যাপ্লিকেশন এবং ওয়েবসাইটগুলোর অভিজ্ঞতা আরও সেরিবদ্ধ করে তোলে।
Three.js-এ Touch Controls এবং Gesture Support কীভাবে ব্যবহার করবেন?
Three.js এর জন্য অনেক লাইব্রেরি এবং প্লাগইন রয়েছে যেগুলি touch controls এবং gesture support প্রদান করে। এর মধ্যে একটি জনপ্রিয় লাইব্রেরি হলো THREE.OrbitControls.js যা 3D দৃশ্যের সাথে ইন্টারঅ্যাকশন করার জন্য সহজ উপায় প্রদান করে। আপনি এটি টাচ এবং মাউস নিয়ন্ত্রণ উভয়ের জন্য ব্যবহার করতে পারেন।
১. OrbitControls.js ব্যবহার করে Touch Controls সেটআপ
OrbitControls হল Three.js-এর একটি ক্লাস যা দৃশ্যের মধ্যে মাউস এবং টাচ কন্ট্রোলের মাধ্যমে ক্যামেরা নিয়ন্ত্রণের সুযোগ দেয়। এটি 3D দৃশ্যের ক্যামেরা প্যান, জুম এবং রোটেট করতে ব্যবহৃত হয়।
OrbitControls.js ইনস্টল এবং সেটআপ:
- OrbitControls.js ইমপোর্ট করা: OrbitControls.js সাধারণত Three.js এর সঙ্গে ডিফল্টভাবে অন্তর্ভুক্ত থাকে, তবে কখনও কখনও এটি আলাদাভাবে ইমপোর্ট করতে হতে পারে।
import { OrbitControls } from 'three/examples/js/controls/OrbitControls';
- টাচ কন্ট্রোল যুক্ত করা:
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/js/controls/OrbitControls';
// সীেন, ক্যামেরা, রেন্ডারার তৈরি করা
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
// 3D অবজেক্ট তৈরি করা
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;
// OrbitControls যুক্ত করা
const controls = new OrbitControls(camera, renderer.domElement);
// রেন্ডার ফাংশন
function animate() {
requestAnimationFrame(animate);
controls.update(); // controls এর মাধ্যমে ক্যামেরা আপডেট করা
renderer.render(scene, camera);
}
animate();
এখানে, OrbitControls ব্যবহারের মাধ্যমে ক্যামেরা রোটেট, প্যান এবং জুম ইন এবং আউট করার ক্ষমতা যুক্ত করা হয়েছে। ব্যবহারকারী মাউস বা টাচ স্ক্রিন দিয়ে এই নিয়ন্ত্রণগুলো করতে পারে।
২. Touch Events এবং Gesture Support
তিনটি প্রধান ধরনের টাচ ইভেন্ট রয়েছে যা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য গুরুত্বপূর্ণ:
- Touchstart: যখন টাচ শুরু হয়।
- Touchmove: যখন টাচ মুভ হয়।
- Touchend: যখন টাচ শেষ হয়।
Gesture Support সাধারণত একাধিক আঙ্গুলের জন্য সাপোর্ট করে, যেমন পিন্চ (জুম ইন/আউট), ট্যাপ, স্ক্রলিং ইত্যাদি।
Three.js-এ টাচ ইভেন্টসের জন্য একটি সাধারণ উদাহরণ:
const onTouchStart = (event) => {
// টাচ শুরু হলে কী করতে হবে
};
const onTouchMove = (event) => {
// টাচ মুভ হলে কী করতে হবে
};
const onTouchEnd = (event) => {
// টাচ শেষ হলে কী করতে হবে
};
// ইভেন্ট লিস্টেনার যোগ করা
renderer.domElement.addEventListener('touchstart', onTouchStart, false);
renderer.domElement.addEventListener('touchmove', onTouchMove, false);
renderer.domElement.addEventListener('touchend', onTouchEnd, false);
৩. Pinch Zoom এবং Gesture Recognition
একাধিক আঙ্গুলের ব্যবহারকারীর আঙ্গুলের অঙ্গভঙ্গি যেমন পিন্চ জুম বা স্ক্রলিং সাপোর্ট করতে কিছু বিশেষ Gesture Recognition প্লাগইন বা লাইব্রেরি ব্যবহার করতে হয়।
একটি জনপ্রিয় লাইব্রেরি Hammer.js যা gesture recognition সমর্থন করে এবং টাচ স্ক্রিনের উপর কাজ করে। এটি ব্যবহারকারী ইন্টারঅ্যাকশন যেমন পিন্চ, ট্যাপ, স্ক্রল, সুইপ ইত্যাদি শনাক্ত করতে সহায়তা করে।
Hammer.js সেটআপ এবং টাচ গেস্টার সাপোর্ট:
- Hammer.js ইনস্টল এবং ইমপোর্ট:
npm install hammerjs
import Hammer from 'hammerjs';
- Hammer.js দিয়ে Gesture Recognizer তৈরি করা:
const hammer = new Hammer(renderer.domElement);
// Pinch gesture detection
hammer.get('pinch').set({ enable: true });
hammer.on('pinch', (event) => {
console.log('Pinch Gesture detected');
camera.zoom *= 1 + event.scale * 0.1;
camera.updateProjectionMatrix();
});
এখানে, pinch গেস্টার ডিটেক্ট করা হয়েছে, যেখানে ব্যবহারকারী টাচ স্ক্রীনে দুটি আঙ্গুল দিয়ে জুম ইন/আউট করতে পারবেন। এর মাধ্যমে ক্যামেরার zoom প্রপার্টি পরিবর্তিত হবে এবং ক্যামেরা রেন্ডার হবে।
সারাংশ
Touch Controls এবং Gesture Support হল Three.js-এ মোবাইল এবং ট্যাবলেট ডিভাইসের জন্য অত্যন্ত গুরুত্বপূর্ণ ফিচার। OrbitControls ব্যবহার করে আপনি সহজেই মাউস বা টাচ কন্ট্রোলের মাধ্যমে 3D দৃশ্য নিয়ন্ত্রণ করতে পারেন। আরও উন্নত ইন্টারঅ্যাকশন যেমন পিন্চ জুম, ট্যাপ, স্ক্রল ইত্যাদি সাপোর্ট করতে Hammer.js বা অন্য Gesture Recognition লাইব্রেরি ব্যবহার করা যেতে পারে।
এই বৈশিষ্ট্যগুলি Three.js এর মাধ্যমে ওয়েব-ভিত্তিক 3D অ্যাপ্লিকেশন এবং ইন্টারঅ্যাকটিভ গ্রাফিক্স তৈরি করার অভিজ্ঞতাকে আরও সমৃদ্ধ এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
