Physics Based Animations

Physics Based Animations কী?

Physics Based Animations হল এমন অ্যানিমেশন যা বাস্তবিক দুনিয়ার পদার্থবিজ্ঞান নিয়মাবলী অনুসরণ করে। অর্থাৎ, এই ধরনের অ্যানিমেশনগুলোতে গতি, বল,摩擦, সংঘর্ষ, গুরত্বাকর্ষণ ইত্যাদির মতো পদার্থবিজ্ঞানের মূলনীতিগুলি ব্যবহার করা হয়। Three.js ব্যবহার করে, আপনি জাভাস্ক্রিপ্ট এবং ওয়েবটেকনোলজি ব্যবহার করে এই ধরনের অ্যানিমেশন তৈরি করতে পারেন, যা আপনার ওয়েব অ্যাপ্লিকেশন বা গেমে আরও রিয়েলিস্টিক এবং ইন্টারেকটিভ অ্যানিমেশন তৈরি করতে সহায়তা করে।

Three.js নিজে Physics engine প্রদান না করলেও, এটি অন্যান্য Physics engines-এর সাথে ইন্টিগ্রেট করা যেতে পারে, যেমন Cannon.js, Ammo.js, অথবা Oimo.js, যা আপনাকে বাস্তবসম্মত পদার্থবিজ্ঞানের ভিত্তিতে অ্যানিমেশন তৈরি করতে সাহায্য করে।

Three.js এ Physics Based Animations তৈরি করা

Three.js এবং Physics engines ব্যবহার করে, আপনি অবজেক্টের গতি এবং গতিবিধি পদার্থবিজ্ঞানের নীতির ওপর ভিত্তি করে নিয়ন্ত্রণ করতে পারেন। Physics based animations তৈরি করতে, আপনাকে কিছু মৌলিক পদার্থবিজ্ঞান ধারণা এবং Three.js এর সাথে Physics engine ইন্টিগ্রেট করার পদ্ধতি জানার প্রয়োজন।

১. Cannon.js এর সাথে Three.js ইন্টিগ্রেশন

Cannon.js হল একটি Physics engine যা 3D বডির সিমুলেশন এবং কোলিশন ডিটেকশন (collision detection) করতে ব্যবহৃত হয়। এটি Three.js এর সাথে খুব সহজেই ইন্টিগ্রেট করা যায়।

Cannon.js এবং Three.js ইন্টিগ্রেশন উদাহরণ:

1. প্রথমে Three.js এবং Cannon.js ইনস্টল করুন:

npm install three cannon-es

2. Three.js এবং Cannon.js ব্যবহার করে Physics based animations তৈরি করা:

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

// Scene সেটআপ
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);

// Physics world তৈরি করা
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);  // পৃথিবীর মতো গুরত্বাকর্ষণ

// Three.js অবজেক্ট তৈরি করা (যেমন একটি Cube)
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 boxShape = new CANNON.Box(new CANNON.Vec3(1, 1, 1)); // সাইজের জন্য ভেক্টর
const boxBody = new CANNON.Body({
  mass: 1,  // মন্ডলীর ভর
  position: new CANNON.Vec3(0, 5, 0)  // পজিশন
});
boxBody.addShape(boxShape);
world.addBody(boxBody);

// ক্যামেরা পজিশন সেট করা
camera.position.z = 5;

// Animation loop
function animate() {
  requestAnimationFrame(animate);

  // Physics update
  world.step(1 / 60); // Physics update at 60 FPS

  // Cannon.js বডির পজিশন এবং রোটেশন Three.js মডেলে আপডেট করা
  cube.position.copy(boxBody.position);
  cube.rotation.copy(boxBody.rotation);

  // রেন্ডার করা
  renderer.render(scene, camera);
}

animate();

এখানে, Cannon.js এর মাধ্যমে আমরা একটি Cube অবজেক্ট তৈরি করেছি এবং গুরত্বাকর্ষণের (gravity) প্রভাব তার উপর প্রয়োগ করেছি। এরপর, Three.js এর মাধ্যমে সেই অবজেক্টের পজিশন এবং রোটেশন ক্যামেরার সাথে আপডেট করেছি, যাতে Physics Engine এর গতি এবং আঙ্গিক পরিবর্তন সঠিকভাবে প্রদর্শিত হয়।

২. Ammo.js এর সাথে Three.js ইন্টিগ্রেশন

Ammo.js হল আরেকটি শক্তিশালী Physics engine যা Cannon.js এর মতো 3D ফিজিক্স সিমুলেশন এবং কোলিশন ডিটেকশন সরবরাহ করে, তবে এটি আরও উচ্চতর পারফরম্যান্স এবং সঠিক পদার্থবিজ্ঞান প্রদান করতে সক্ষম। এটি WebAssembly ব্যবহার করে ওয়েব ব্রাউজারে উচ্চ পারফরম্যান্স সিমুলেশন প্রদান করে।

Ammo.js এবং Three.js ব্যবহার করার উদাহরণ:

1. প্রথমে Ammo.js ইনস্টল করুন:

npm install ammo.js

2. Ammo.js এবং Three.js ব্যবহার করে Physics based animations তৈরি করা:

import * as THREE from 'three';
import Ammo from 'ammo.js';

// Scene 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);

// Physics world setup
let physicsWorld;
let rigidBodies = [];

Ammo().then(function (AmmoLib) {
  Ammo = AmmoLib;

  physicsWorld = new Ammo.btDiscreteDynamicsWorld(
    new Ammo.btDefaultCollisionConfiguration(),
    new Ammo.btCollisionDispatcher(new Ammo.btDefaultCollisionConfiguration()),
    new Ammo.btSequentialImpulseConstraintSolver(),
    new Ammo.btBroadphaseInterface()
  );

  physicsWorld.setGravity(new Ammo.btVector3(0, -9.82, 0)); // Earth's gravity

  // Box shape for physics
  const groundShape = new Ammo.btBoxShape(new Ammo.btVector3(50, 1, 50));
  const groundTransform = new Ammo.btTransform();
  groundTransform.setIdentity();
  groundTransform.setOrigin(new Ammo.btVector3(0, -1, 0));

  const groundMass = 0; // Static object
  const groundMotionState = new Ammo.btDefaultMotionState(groundTransform);
  const groundInertia = new Ammo.btVector3(0, 0, 0);
  const groundRbInfo = new Ammo.btRigidBodyConstructionInfo(groundMass, groundMotionState, groundShape, groundInertia);
  const groundBody = new Ammo.btRigidBody(groundRbInfo);
  physicsWorld.addRigidBody(groundBody);

  // Add objects to physics world
  addCube(0, 5, 0, 1); // Adding a cube to the world

  // Start animation loop
  function animate() {
    requestAnimationFrame(animate);

    physicsWorld.stepSimulation(1 / 60, 10); // Physics simulation step

    // Update the positions of Three.js objects based on Ammo.js physics
    rigidBodies.forEach(function (body) {
      const ms = body.getMotionState();
      if (ms) {
        ms.getWorldTransform(groundTransform);
        const p = groundTransform.getOrigin();
        const q = groundTransform.getRotation();
        body.threeObject.position.set(p.x(), p.y(), p.z());
        body.threeObject.rotation.set(q.x(), q.y(), q.z());
      }
    });

    renderer.render(scene, camera);
  }

  // Adding a cube
  function addCube(x, y, z, mass) {
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(x, y, z);
    scene.add(cube);

    const shape = new Ammo.btBoxShape(new Ammo.btVector3(0.5, 0.5, 0.5));
    const transform = new Ammo.btTransform();
    transform.setIdentity();
    transform.setOrigin(new Ammo.btVector3(x, y, z));

    const inertia = new Ammo.btVector3(0, 0, 0);
    const rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, new Ammo.btDefaultMotionState(transform), shape, inertia);
    const body = new Ammo.btRigidBody(rbInfo);

    physicsWorld.addRigidBody(body);
    cube.userData = body;
    body.threeObject = cube;
    rigidBodies.push(body);
  }

  animate();
});

এখানে, Ammo.js এবং Three.js এর মাধ্যমে একটি সাধারণ cube অবজেক্টের জন্য Physics Simulation তৈরি করা হয়েছে। গুরত্বাকর্ষণ এবং কোলিশন ডিটেকশন ব্যবহৃত হয়েছে যাতে কিউবটি সঠিকভাবে পৃথিবীজুড়ে পতিত হতে পারে।

সারাংশ

Physics Based Animations হল এমন অ্যানিমেশন যা বাস্তব জীবনের পদার্থবিজ্ঞান নীতির উপর ভিত্তি করে কাজ করে। Three.js এবং Physics engines যেমন Cannon.js এবং Ammo.js ব্যবহার করে, আপনি ওয়েব অ্যাপ্লিকেশন বা গেমে বাস্তবসম্মত অ্যানিমেশন তৈরি করতে পারেন। Cannon.js এবং Ammo.js ব্যবহার করে আপনি গতি, গুরত্বাকর্ষণ, সংঘর্ষ এবং অন্যান্য পদার্থবিজ্ঞানের নীতির সাথে সিমুলেশন করতে পারেন, যা আপনাকে একটি ইন্টারেকটিভ এবং রিয়েলিস্টিক ইউজার এক্সপিরিয়েন্স প্রদান করবে।