Gravity এবং Forces প্রয়োগ করা

Three.js এবং Physics

Three.js হল একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি এবং প্রদর্শন করতে ব্যবহৃত হয়, যা মূলত WebGL এর উপরে তৈরি করা। Three.js গ্রাফিক্স এবং অ্যানিমেশন তৈরি করতে অনেক শক্তিশালী ফিচার সরবরাহ করে, তবে এটি গ্র্যাভিটি (gravity) এবং ফোর্স (forces) এর মতো ফিজিক্যাল প্রক্রিয়াগুলির জন্য বিল্ট-ইন সমর্থন প্রদান করে না। তবে, আপনি Three.js এর সঙ্গে Physics Engine ব্যবহার করে গ্র্যাভিটি এবং অন্যান্য বাহিনী প্রয়োগ করতে পারেন।

Three.js এর মাধ্যমে Physics Engines যেমন Cannon.js, Ammo.js, এবং Oimo.js ব্যবহার করে আপনি 3D অবজেক্টে ফিজিক্যাল ফোর্স প্রয়োগ করতে পারেন। এই ফিজিক্স ইঞ্জিনগুলো আপনাকে বাস্তব জীবনের মতো গতি, সংঘর্ষ, এবং গ্র্যাভিটি সিমুলেট করতে সাহায্য করে।

Gravity এবং Forces প্রয়োগ করার জন্য Cannon.js ব্যবহার করা

Cannon.js একটি জনপ্রিয় ফিজিক্স ইঞ্জিন যা 3D সিমুলেশন তৈরি করার জন্য ব্যবহৃত হয় এবং Three.js এর সঙ্গে সহজেই একত্রিত করা যায়। Cannon.js ব্যবহার করে আপনি 3D অবজেক্টের উপর gravity, collision detection, এবং forces প্রয়োগ করতে পারেন।

১. Cannon.js ইনস্টলেশন

প্রথমে, আপনি Cannon.js ইনস্টল করতে হবে:

npm install cannon

এরপর, Three.js এবং Cannon.js লাইব্রেরি ইম্পোর্ট করুন:

import * as THREE from 'three';
import * as CANNON from 'cannon';

২. থ্রি.js সীন তৈরি করা

এখন, Three.js সীন তৈরি করতে হবে যেখানে আপনার 3D অবজেক্টগুলো প্রদর্শিত হবে।

// Three.js সীন সেটআপ
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);

// সাইজ সেট করা
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 5;

৩. Cannon.js সিমুলেশন তৈরি করা

এখন, একটি world তৈরি করতে হবে যা ফিজিক্স সিমুলেশন পরিচালনা করবে। Cannon.js সিমুলেশন তৈরি করতে এই কোড ব্যবহার করতে পারেন:

// Cannon.js world তৈরি করা
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);  // পৃথিবীর মতো গ্র্যাভিটি প্রয়োগ
world.broadphase = new CANNON.NaiveBroadphase();
world.solver = new CANNON.GS2Solver();
world.allowSleep = true;

এখানে, world.gravity.set(0, -9.82, 0) দ্বারা পৃথিবীর মতো গ্র্যাভিটি সিমুলেট করা হয়েছে (গতি 9.82 মিটার/সেকেন্ড² নিচের দিকে)।

৪. 3D অবজেক্ট এবং ফিজিক্স বডি যোগ করা

এখন, একটি 3D অবজেক্ট তৈরি করে এর উপর ফিজিক্যাল বডি যোগ করতে হবে, যাতে গ্র্যাভিটি এবং ফোর্স তার উপর প্রভাব ফেলতে পারে।

// 3D কিউব তৈরি করা (Three.js)
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Cannon.js বডি তৈরি করা
const shape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
const mass = 1;
const cubeBody = new CANNON.Body({
  mass: mass,
  position: new CANNON.Vec3(0, 5, 0), // শুরু অবস্থান
});
cubeBody.addShape(shape);
world.addBody(cubeBody);

এখানে, একটি 3D কিউব তৈরি করা হয়েছে এবং Cannon.js এ একটি Box শেপ তৈরি করে সেটি 3D কিউবের উপর প্রয়োগ করা হয়েছে। Cube এর গতি এবং অবস্থান ফিজিক্যালি কন্ট্রোল করা হবে।

৫. গ্র্যাভিটি এবং ফোর্স প্রয়োগ করা

Cannon.js ব্যবহার করে আমরা 3D কিউবের উপরে gravity এবং অন্যান্য forces প্রয়োগ করতে পারি।

// World আপডেট করা
function animate() {
  requestAnimationFrame(animate);

  world.step(1 / 60); // 60Hz এর সাথে ফিজিক্স আপডেট

  // Three.js অবজেক্টের পজিশন আপডেট করা Cannon.js বডির উপর ভিত্তি করে
  cube.position.copy(cubeBody.position);
  cube.quaternion.copy(cubeBody.quaternion);

  renderer.render(scene, camera);
}

animate();

এখানে, world.step(1 / 60) প্রতিটি ফ্রেমে 60Hz এর সাথে Cannon.js সিমুলেশন আপডেট করে, এবং তারপর Three.js কিউবের অবস্থান এবং কোয়াটার্নিয়ন (rotation) Cannon.js বডির সঙ্গে মিলে আপডেট করা হয়।

৬. ফোর্স প্রয়োগ করা

Cannon.js ব্যবহার করে আপনি কেবল গ্র্যাভিটি নয়, অন্য ফোর্সও প্রয়োগ করতে পারেন, যেমন স্প্রিং ফোর্স, প্রেশার ফোর্স বা সরাসরি নির্দিষ্ট ডাইরেকশনে বাহিনী প্রয়োগ করা।

// কিউবের উপর বাহিনী প্রয়োগ করা
const force = new CANNON.Vec3(0, 0, -10);  // Z অক্ষের বিপরীত দিকে বাহিনী
cubeBody.applyForce(force, cubeBody.position);

এখানে, applyForce ব্যবহার করে কিউবের উপর একটি বাহিনী প্রয়োগ করা হচ্ছে।

সারাংশ

Three.js এর সঙ্গে Cannon.js ব্যবহার করে আপনি 3D দৃশ্যে গ্র্যাভিটি এবং ফোর্স প্রয়োগ করতে পারেন। Cannon.js একটি শক্তিশালী ফিজিক্স ইঞ্জিন যা gravity, collision detection, forces ইত্যাদি সিমুলেট করতে সাহায্য করে। Three.js এবং Cannon.js একত্রিত করে, আপনি বাস্তব সময়ের 3D সিমুলেশন তৈরি করতে পারেন, যেখানে আপনার অবজেক্টগুলো গ্র্যাভিটি, ফোর্স এবং সংঘর্ষের সাথে বাস্তবসম্মতভাবে ইন্টারঅ্যাক্ট করতে পারে।

এটি গেম ডেভেলপমেন্ট, ভিজ্যুয়ালাইজেশন, এবং অন্যান্য 3D সিমুলেশন প্রজেক্টের জন্য খুবই উপকারী হতে পারে।