Three.js এর সাথে Physics Engine (Cannon.js, Ammo.js) ইন্টিগ্রেশন

Three.js এবং Physics Engine এর ভূমিকা

Three.js হল একটি জনপ্রিয় JavaScript লাইব্রেরি যা ওয়েব ব্রাউজারে 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে তৈরি এবং বিভিন্ন 3D মডেল, সীন, এবং এনিমেশন প্রক্রিয়া সহজে তৈরি করতে সহায়তা করে।

তবে, যদি আপনি একটি 3D সিমুলেশন বা গেম তৈরি করতে চান, যেখানে বাস্তবসম্মত শারীরিক আচরণ (যেমন বল, গতি, সংঘর্ষ ইত্যাদি) দরকার, তবে একটি Physics Engine ব্যবহৃত হয়। Physics Engines যেমন Cannon.js এবং Ammo.js আপনাকে বাস্তবসম্মত শারীরিক গতিবিধি এবং সংঘর্ষের প্রক্রিয়া তৈরি করতে সহায়তা করে।

Physics Engine কি?

Physics Engines হল এমন সফটওয়্যার লাইব্রেরি যা বাস্তব শারীরিক গতিবিধি সিমুলেট করে। এই ইঞ্জিনগুলি ডাইনামিক সিমুলেশন তৈরি করতে ব্যবহৃত হয়, যেমন:

• জরিপ সংঘর্ষ (Collision detection)
• গতি (Velocity)
• বল (Force)
• গ্রাভিটি (Gravity)

Cannon.js এবং Ammo.js হল দুইটি জনপ্রিয় Physics Engine যা Three.js এর সাথে ইন্টিগ্রেট করা যায়।

১. Three.js এবং Cannon.js ইন্টিগ্রেশন

Cannon.js একটি lightweight Physics Engine যা 3D শারীরিক সিমুলেশন এবং সংঘর্ষের জন্য ব্যবহৃত হয়। এটি Three.js এর সাথে ইন্টিগ্রেট করতে পারেন, যাতে আপনি 3D অবজেক্টগুলির মধ্যে শারীরিক আচরণ সিমুলেট করতে পারেন।

Cannon.js এবং Three.js একত্রে ব্যবহার করার জন্য ধাপগুলি:

1. Cannon.js ইনস্টলেশন:

   আপনি npm বা CDN ব্যবহার করে Cannon.js ইনস্টল করতে পারেন:

   • npm:

     npm install cannon
     

   • CDN:

     <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon-es/0.19.0/cannon-es.min.js"></script>
     

2. Three.js এবং Cannon.js সেটআপ:

   একটি সহজ উদাহরণ যেখানে একটি 3D কিউব এবং একটি ফ্ল্যাট প্ল্যান তৈরি করা হচ্ছে এবং তাদের মধ্যে শারীরিক আচরণ প্রযোজ্য করা হচ্ছে।

   import * as THREE from 'three';
   import * as CANNON from 'cannon-es';
   
   // 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();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);
   
   // Cannon.js বিশ্ব তৈরি
   const world = new CANNON.World();
   world.gravity.set(0, -9.82, 0);  // গ্রাভিটি সেট করা
   
   // 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 body = new CANNON.Body({
     mass: 1,  // বক্সের ভর
     position: new CANNON.Vec3(0, 5, 0),  // স্টার্টিং পজিশন
   });
   body.addShape(shape);
   world.addBody(body);
   
   // ক্যামেরা অবস্থান
   camera.position.z = 10;
   
   // অ্যানিমেশন লুপ
   function animate() {
     requestAnimationFrame(animate);
   
     // Cannon.js বিশ্ব আপডেট
     world.step(1/60);
   
     // Three.js কিউবের পজিশন আপডেট
     cube.position.copy(body.position);
     cube.rotation.set(body.rotation.x, body.rotation.y, body.rotation.z);
   
     renderer.render(scene, camera);
   }
   animate();
   

   এখানে, Cannon.js ব্যবহার করে কিউবের শারীরিক গতিবিধি তৈরি করা হয়েছে এবং Three.js এর মাধ্যমে সেই কিউবটিকে দৃশ্যমান করা হয়েছে।

২. Three.js এবং Ammo.js ইন্টিগ্রেশন

Ammo.js হল একটি আরও শক্তিশালী এবং উচ্চক্ষমতাসম্পন্ন Physics Engine যা Bullet Physics থেকে তৈরি। এটি ব্যবহৃত হয় যখন জটিল শারীরিক সিমুলেশন, যেমন মিউচুয়াল সংঘর্ষ, বল এবং সেমি-রিয়েলিস্টিক ইফেক্ট দরকার হয়।

Ammo.js এবং Three.js একত্রে ব্যবহার করার জন্য ধাপগুলি:

1. Ammo.js ইনস্টলেশন:

   আপনি npm বা CDN ব্যবহার করে Ammo.js ইনস্টল করতে পারেন:

   • npm:

     npm install ammo.js
     

   • CDN:

     <script src="https://cdn.jsdelivr.net/npm/ammo.js@0.0.12"></script>
     

2. Three.js এবং Ammo.js সেটআপ:

   এখানে, একটি সাধারণ উদাহরণ দেয়া হলো যেখানে একটি সিম্পল কিউব এবং গ্রাউন্ড তৈরি করা হচ্ছে এবং তাদের মধ্যে শারীরিক আচরণ Ammo.js দিয়ে সিমুলেট করা হচ্ছে।

   import * as THREE from 'three';
   import Ammo from 'ammo.js';
   
   let scene, camera, renderer, world, clock;
   
   function init() {
     scene = new THREE.Scene();
     camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
     renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
   
     clock = new THREE.Clock();
   
     // Ammo.js বিশ্ব সেটআপ
     Ammo().then(function(AmmoLib) {
       world = new AmmoLib.btDiscreteDynamicsWorld(
         new AmmoLib.btDbvtBroadphase(),
         new AmmoLib.btDefaultCollisionConfiguration(),
         new AmmoLib.btCollisionDispatcher(),
         new AmmoLib.btSequentialImpulseConstraintSolver()
       );
   
       world.setGravity(new AmmoLib.btVector3(0, -9.82, 0));  // গ্রাভিটি সেট করা
   
       // Three.js বক্স তৈরি
       const geometry = new THREE.BoxGeometry(1, 1, 1);
       const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
       const cube = new THREE.Mesh(geometry, material);
       scene.add(cube);
   
       // Ammo.js বক্স তৈরি
       const shape = new AmmoLib.btBoxShape(new AmmoLib.btVector3(1, 1, 1));
       const mass = 1;
       const startTransform = new AmmoLib.btTransform();
       startTransform.setIdentity();
       startTransform.setOrigin(new AmmoLib.btVector3(0, 5, 0));
   
       const localInertia = new AmmoLib.btVector3(0, 0, 0);
       shape.calculateLocalInertia(mass, localInertia);
   
       const motionState = new AmmoLib.btDefaultMotionState(startTransform);
       const rbInfo = new AmmoLib.btRigidBodyConstructionInfo(mass, motionState, shape, localInertia);
       const body = new AmmoLib.btRigidBody(rbInfo);
   
       world.addRigidBody(body);
   
       // ক্যামেরা পজিশন
       camera.position.z = 10;
   
       // অ্যানিমেশন লুপ
       function animate() {
         requestAnimationFrame(animate);
   
         // Ammo.js পৃথিবী আপডেট
         world.stepSimulation(1 / 60, 10);
   
         // Three.js কিউবের পজিশন আপডেট
         const transform = body.getWorldTransform();
         const origin = transform.getOrigin();
         cube.position.set(origin.x(), origin.y(), origin.z());
   
         renderer.render(scene, camera);
       }
   
       animate();
     });
   }
   
   init();
   

   এখানে, Ammo.js ব্যবহার করে কিউবের শারীরিক আচরণ এবং গ্রাভিটি সিমুলেশন করা হচ্ছে, এবং Three.js এর মাধ্যমে সেই কিউবটি দৃশ্যমান করা হচ্ছে।

Three.js এবং Physics Engine Integration এর উপকারিতা

• বাস্তবসম্মত শারীরিক সিমুলেশন: Cannon.js এবং Ammo.js ব্যবহার করে, আপনি বাস্তবসম্মত শারীরিক গতিবিধি এবং সংঘর্ষ সিমুলেট করতে পারেন।
• ওয়েব গেম উন্নয়ন: 3D গেম বা সিমুলেশন তৈরি করতে Physics Engine এবং Three.js একত্রিত ব্যবহার করলে গেমের বাস্তবসম্মত আচরণ আরও শক্তিশালী হয়।
• ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন: 3D ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন যেমন সিমুলেশন, গেম, বা ট্রেনিং টুল তৈরি করতে এই ইন্টিগ্রেশন খুবই কার্যকরী।

সারাংশ

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