First-person এবং Third-person ক্যামেরা

Advanced Camera Techniques - ব্যাবিলনজেএস (BabylonJS) - Web Development

324

BabylonJS 3D গেম এবং অ্যাপ্লিকেশন তৈরি করতে একটি শক্তিশালী ইঞ্জিন। এই ইঞ্জিনে ক্যামেরার মাধ্যমে ব্যবহারকারীদের দৃশ্যে বিভিন্ন দৃষ্টিকোণ প্রদর্শন করা হয়। এর মধ্যে First-person (FP) ক্যামেরা এবং Third-person (TP) ক্যামেরা অত্যন্ত গুরুত্বপূর্ণ এবং জনপ্রিয়।

First-person ক্যামেরা: এই ক্যামেরাতে ব্যবহারকারী ক্যামেরার দৃষ্টিকোণ থেকে দৃশ্য দেখতে পায়, অর্থাৎ ক্যামেরার অবস্থান ব্যবহারকারীর চরিত্রের মধ্যে থাকে এবং ক্যামেরা ব্যবহারের মাধ্যমে খেলোয়াড় পরিবেশের সাথে সরাসরি ইন্টারঅ্যাক্ট করতে পারে।
Third-person ক্যামেরা: এই ক্যামেরাতে ব্যবহারকারী ক্যামেরা পিছনে রেখে তার চরিত্রকে দেখে, অর্থাৎ ক্যামেরা চরিত্রের পেছনে থাকে এবং ব্যবহারকারী তার চরিত্রকে সারা পরিবেশের মধ্যে পরিচালনা করতে পারে।

First-person ক্যামেরা

First-person ক্যামেরার মধ্যে, আপনি সাধারণত একটি UniversalCamera ব্যবহার করেন যা মাউস বা কীবোর্ড ইনপুটের মাধ্যমে ব্যবহারকারীর দৃষ্টিকোণ নিয়ন্ত্রণ করতে সাহায্য করে। এর মাধ্যমে ব্যবহারকারী দৃশ্যে পুরোপুরি এক হয়ে যায়।

First-person ক্যামেরা সেটআপ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS First-person Camera</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);

        // First-person ক্যামেরা তৈরি
        var camera = new BABYLON.UniversalCamera("FP_Camera", BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);  // মাউস বা কীবোর্ড ইনপুট গ্রহণ

        // আলোর উৎস তৈরি
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
        light.intensity = 0.7;

        // একটি বক্স তৈরি করা
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
        box.position.z = 5;  // বক্সটিকে সামনে রাখা

        // দৃশ্য রেন্ডার করা
        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

UniversalCamera: এটি First-person ক্যামেরার জন্য ব্যবহৃত হয়। ক্যামেরার অবস্থান সাধারণত ব্যবহারকারীর চরিত্রের সাথে সম্পর্কিত।
camera.attachControl(canvas, true): এই ফাংশনটি ক্যামেরা ইনপুট (মাউস বা কীবোর্ড) থেকে নিয়ন্ত্রণ গ্রহণ করতে সক্ষম করে।

এটি ব্যবহারকারীর দৃষ্টিকোণ সরাসরি পরিবেশে রাখে এবং তিনি চারপাশের দৃশ্য দেখতে পারেন এবং ইন্টারঅ্যাক্ট করতে পারেন।

Third-person ক্যামেরা

Third-person ক্যামেরার মধ্যে, ব্যবহারকারী চরিত্রের পিছনে বা কিছুটা দূরত্বে অবস্থান করে। এটি সাধারণত গেমের মতো অ্যাপ্লিকেশনে ব্যবহৃত হয় যেখানে ব্যবহারকারী তার চরিত্রকে নির্দেশনা দেয় এবং ক্যামেরা চরিত্রের পিছনে বা কাছাকাছি অবস্থান নেয়।

Third-person ক্যামেরা সেটআপ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS Third-person Camera</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);

        // ক্যামেরা তৈরি (Third-person ক্যামেরা)
        var camera = new BABYLON.FollowCamera("FollowCamera", BABYLON.Vector3.Zero(), scene);
        camera.radius = 10;  // ক্যামেরার দূরত্ব
        camera.heightOffset = 2;  // ক্যামেরার উচ্চতা
        camera.rotationOffset = 180;  // ক্যামেরার ঘূর্ণন
        camera.cameraAcceleration = 0.05;  // ক্যামেরার গতি
        camera.maxCameraSpeed = 10;  // সর্বোচ্চ গতি

        // আলোর উৎস তৈরি
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
        light.intensity = 0.7;

        // একটি বক্স তৈরি করা (এই বক্সটি ক্যামেরার লক্ষ্য)
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
        box.position.y = 1;  // বক্সটিকে উপরে রাখা

        // ক্যামেরা বক্সটিকে অনুসরণ করবে
        camera.lockedTarget = box;

        // দৃশ্য রেন্ডার করা
        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

FollowCamera: এটি Third-person ক্যামেরার জন্য ব্যবহৃত হয়। ক্যামেরা চরিত্রকে অনুসরণ করে এবং এর চারপাশে ঘোরে।
camera.radius: ক্যামেরার চরিত্র থেকে দূরত্ব নির্ধারণ করে।
camera.lockedTarget = box: ক্যামেরা বক্সটি (অথবা অন্য কোনো মেশ) অনুসরণ করবে। এই উদাহরণে, ক্যামেরা বক্সটিকে লক্ষ্য করে।

এটি ব্যবহারকারীর চরিত্র বা অবজেক্টকে অনুসরণ করে এবং ব্যবহারকারী তার চারপাশের পরিবেশ দেখতে এবং ক্যামেরার অবস্থান নিয়ন্ত্রণ করতে পারেন।